Глобальная функция/служба для обнаружения и замены неопределенных свойств объекта | Угловая 2 -TS

Question

Я искал решение проблемы

core.umd.js:3523 ORIGINAL EXCEPTION: Cannot read property 'fullName' of undefined

Исключение пришло из шаблона на получение конкретного свойства:

{{project.collaborators["0"]["fullName"]}} 

Я нашел несколько полезных answer слишком ,

, но я искал способ, чтобы определить глобальную службу, которая будет проверять каждый объект и заменить недостающее/пустое свойство со значением по умолчанию т.е. -

вместо проверки в каждом шаблоне каждого свойстве и сделать код меньше глючит ,

// undefined-obj.service.ts 
import { Injectable } from '@angular/core'; 

@Injectable() 
export class UndefinedObjectsGlobalService { 
private charecterToReplace: string = '-'; // set defualt value 

replaceDefaultCharecter(object: any, charecterToReplace: string): any { 
     this.charecterToReplace = charecterToReplace; 
     // create instance vars to store keys and final output 
     let keyArr: any[] = Object.keys(object), 
     var dataArr: any[]; 

     // loop through the object, 
     // pushing values to the return array 
     keyArr.forEach((key: any) => { 

       // if key is null at any iteration then replace is with given text 
       if (key == null){ 
         dataArr.push(object[key] = this.charecterToReplace); 
         // else push 
       }else{ 
         dataArr.push(object[key]); 
       } 

     }); 

     // return the resulting array 
     // need to convert is back to object any idea ? 
     return dataArr; 
     } 
} 

, как я новичок в угловой поэтому класс undefinedObjectsGlobalService может быть багги

, пожалуйста, помогите.

Answer 1

Возможно, вы пытаетесь получить доступ к объекту объекта, который не существует.

Угловой уже обеспечивает работу оператора elvis для обработки такого рода вещей.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     {{collaborators["0"]?.fullname}} 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    collaborators: [{fullname: string}]; 
    constructor() { 
    this.name = 'Angular2' 
    this.collaborators = []; 
    } 
} 

Вы можете увидеть пример here.