angular2: خطأ: TypeError: لا يمكن قراءة الخاصية '...' غير المعرفة




angular2-template 2-way-object-databinding (2)

ذلك لأن abc غير معرف في لحظة تقديم القالب. يمكنك استخدام مشغل تنقل آمن ( ? ) لحماية "القالب" حتى تكتمل مكالمة HTTP:

{{abc?.xyz?.name}}

يمكنك قراءة المزيد حول مشغل الملاحة الآمن here .

تحديث:

لا يمكن استخدام مشغل التنقل الآمن في المصفوفات ، فسيتعين عليك الاستفادة من توجيه NgIf للتغلب على هذه المشكلة:

<div *ngIf="arr && arr.length > 0">
    {{arr[0].name}}
</div>

اقرأ المزيد عن توجيه NgIf here .

لقد أرفقت الغطاس من بلدي قطعة رمز angular2. أرغب في طباعة حقل من JSON الخاص بي ، لكن لا يمكنني طباعة ذلك كما هو مبدئي.

هذا هو ملف المكون الخاص بي

import {Component, NgModule, OnInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

class MyData {
  xyz : MySubData;
}

class MySubData {
  name : string;
} 
@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      {{abc.xyz.name}}
    </div>
  `,
})
export class App implements OnInit {
  abc : MyData = null;
  constructor() {
    this.name = 'Angular2'
  }

  ngOnInit() {
    setTimeout(() => {
      this.abc = new MyData();
      this.abc.xyz = new MySubData();
      this.abc.xyz.name = "Binita";
    }, 2000);
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

عندما أقوم بإزالة السطر {{abc.xyz.name}} من القالب الخاص بي ، فسيكون الأمر جيدًا.

لقد استخدمت مهلة محددة في الكود لأنني أتلقى بياناتي من Promise (أي مكالمة غير متزامنة).

يمكنني أن أفهم مبدئيًا لأن abc null ، لا أستطيع العثور على رمز abc.xyz.name. لكنني لا أريد وضع أي شرط للتحقق. لأن لدي العديد من الممتلكات داخل JSON وليس من الممكن لكل خاصية أن تكتب إذا كان الشرط.

في وقت سابق في angularjs 1 إذا كانت abc فارغة ، فسيتم استبدالها تلقائيًا بسلسلة فارغة. أريد أن أفعل نفس الشيء في angular2. الرجاء الاقتراح.

أدناه هو الغطاس

https://plnkr.co/edit/u1NqNF0penz7OS55QmoU?p=preview


مشغل الملاحة الآمن أو المشغل الموجود أو مشغل Null Propagation معتمد في القالب الزاوي. افترض أن لديك فئة مكون

  myObj:any = {
    doSomething: function () { console.log('doing something'); return 'doing something'; },
  };
  myArray:any;
  constructor() { }

  ngOnInit() {
    this.myArray = [this.myObj];
  }

يمكنك استخدامه في قالب ملف HTML كالتالي:

<div>test-1: {{  myObj?.doSomething()}}</div>
<div>test-2: {{  myArray[0].doSomething()}}</div>
<div>test-3: {{  myArray[2]?.doSomething()}}</div>




2-way-object-databinding