template - ng submit angular 4




Angular2: لا يمكن قراءة خاصية 'name' غير محددة (4)

أنا بدأت في تعلم Angular2. لقد كنت أتابع دروس الأبطال المقدمة في angular.io. كل شيء كان على ما يرام حتى ، منزعجًا من فوضى HTML باستخدام القالب ، استخدمت عنوان URL للقالب في مكانه ، وقمت بنقل HTML إلى ملف باسم hero.html. الخطأ الذي تم إنشاؤه هو "لا يمكن قراءة خاصية 'اسم' غير معرف". الغريب ، يمكن الوصول إلى متغير الأبطال الذي يشير إلى مجموعة من الكائنات بحيث ينتج ngFor الكمية الصحيحة من علامات "li" وفقًا لعدد الكائنات في المصفوفة. ومع ذلك ، لا يمكن الوصول إلى بيانات كائنات الصفيف. علاوة على ذلك ، حتى المتغير البسيط الذي يحتوي على بعض النصوص ، لن يتم عرضه باستخدام {{}} بين قوسين في HTML (انظر الكود المتاح).

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './hero.html',
  styleUrls:['./styles.css']
})

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero:Hero;

  onSelect(hero: Hero):void{
      this.selectedHero = hero;
  }
}

export class Hero{
   id: number;
   name: string;
}

const HEROES: Hero[] = [
   { id: 1, name: 'Mr. Nice' },
   { id: 2, name: 'Narco' },
   { id: 3, name: 'Bombasto' },
   { id: 4, name: 'Celeritas' },
   { id: 5, name: 'Magneta' },
   { id: 6, name: 'RubberMan' },
   { id: 7, name: 'Dynama' },
   { id: 8, name: 'Dr IQ' },
   { id: 9, name: 'Magma' },
   { id: 10, name: 'Tornado' }
];

hero.html

<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
  <li *ngFor="let hero of heroes">
    <span class="badge">{{hero.id}}</span> {{hero.name}}
  </li>
</ul>
<h2>{{hero.name}} details!</h2>
<div>
    <label>id: </label>{{hero.id}}
</div>
<div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name">
<div>

هنا صورة:


المتغير selectHero فارغ في القالب بحيث لا يمكنك ربط selectHero.name كما هو. تحتاج إلى استخدام عامل elvis لهذه الحالة:

<input [ngModel]="selectedHero?.name" (ngModelChange)="selectedHero.name = $event" />

يلزم أيضًا الفصل بين [(ngModel)] في [ngModel] و (ngModelChange) لأنه لا يمكنك تعيين تعبير يستخدم عامل تشغيل elvis.

أعتقد أيضًا أنك تقصد استخدام:

<h2>{{selectedHero?.name}} details!</h2>

بدلا من:

<h2>{{hero.name}} details!</h2>

كل ما تحتاجه هو أن تقرأ المزيد قليلاً وأنك ستُعرّف على التوجيه البنيوي * ngIf.

selectHero.name غير موجود حتى الآن لأن المستخدم لم يقم بعد بتحديد البطل حتى لا يُرجع معرفًا.

<div *ngIf="selectedHero">
  <h2>{{selectedHero.name}} details!</h2>
  <div><label>id: </label>{{selectedHero.id}}</div>
  <div>
    <label>name: </label>
    <input [(ngModel)]="selectedHero.name" placeholder="name"/>
  </div>
</div>

يبقى التوجيه * ngIf محددًا من HOME خارج DOM حتى يتم تحديده وبالتالي يصبح صادقا.

ساعدتني هذه الوثيقة في فهم التوجيهات الهيكلية.


لتجنب ذلك ، يمكنك أيضًا تهيئة العضو selectedHero Hero من المكون الخاص بك إلى كائن فارغ (بدلاً من تركه غير محدد).

في مثال التعليمة البرمجية الخاصة بك ، قد يعطي هذا شيئًا مثل هذا:

export class AppComponent {
  title = 'Tour of Heroes';
  heroes = HEROES;
  selectedHero:Hero = new Hero();

  onSelect(hero: Hero):void{
      this.selectedHero = hero;
  }
}

هذا الخط

<h2>{{hero.name}} details!</h2>

خارج *ngFor وليس هناك hero لذلك فشل hero.name .







angular2-template