Ma'lumotlarni ulashda xato: mulk null

Komponentlar ro'yxati va uning bolasi (komponentli element) mavjud. Ma'lumotlar ro'yxatidan ob'ektga o'tishga harakat qilyapman, lekin ma'lumotni ishga tushirish ishi ishlamayapti, chunki ob'ekt null bo'lsa ham (umid qilamanki) to'g'ri ishga tushirilgan bo'lsa ham.

O'zining shablonlari bilan ro'yxat komponenti:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { Recipe } from '../recipe';
import { RecipeItemComponent } from './recipe-item.component';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styles: []
})

export class RecipeListComponent implements OnInit {
  @Output() recipeSelected = new EventEmitter();
  recipes: Recipe[] = [];
  public recipe: Recipe;

  constructor() {
    this.recipe = new Recipe('Dummy', 'Dummy', 'http://thumbs1.ebaystatic.com/d/l225/m/mfXELL6zPWJE4OC0agiXMZw.jpg');
  }

  ngOnInit() {
  }

  onSelected(recipe: Recipe) {
    this.recipeSelected.emit(recipe);
  }
}

<div class="row">
  <div class="col-xs-12">
    New Recipe
  </div>
</div>
<div class="row">
  <div class="col-xs-12">
    
    [recipe]="recipe" (click)="onSelected(recipe)">
  </div>
</div>

Va bu erda:

import { Component, OnInit, Input } from '@angular/core';
import { Recipe } from '../recipe';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styles: []
})
export class RecipeItemComponent implements OnInit {
  @Input() recipe: Recipe;
  recipeId: number;

  constructor() { 

  }

  ngOnInit() {
  }
}


  <div class="pull-left">
    

{{name}}

{{description}}

</div>

Xato:

Unhandled Promise rejection: Error in ./RecipeItemComponent class RecipeItemComponent - inline template:2:40 caused by: Cannot read property 'name' of undefined ; Zone:  ; Task: Promise.then ; Value:
ViewWrappedError
Error: Error in ./RecipeItemComponent class RecipeItemComponent - inline template:2:40 caused by: Cannot read property 'name' of undefined
    at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:6880:33)
    at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:24986:16)
    at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:25051:16)
    at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:53759:16)
    at CompiledTemplate.proxyViewClass.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:72648:23)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:72621:18)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:72408:18)
    at CompiledTemplate.proxyViewClass.View_RecipeListComponent0.detectChangesInternal (/AppModule/RecipeListComponent/component.ngfactory.js:96:20)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:72423:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:72618:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:72408:18)
    at CompiledTemplate.proxyViewClass.View_RecipesComponent0.detectChangesInternal (/AppModule/RecipesComponent/component.ngfactory.js:83:19)
    at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:72423:14)
    at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:72618:44)
    at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:72408:18)

Mana mening burchak versiyam:

angular-cli: 1.0.0-beta.28.3
node: 7.6.0
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/compiler-cli: 2.4.9

Har qanday taklif uchun rahmat.

Qo'shimcha ma'lumotlar:

Rejani sinfi ob'ekti:

export class Recipe {
    constructor(public name: string, public description: string, public imagePath: string) {

    }
}
1

{{resept.name}}

?
qo'shib qo'ydi muallif AngularInDepth.com, manba
Belgilangan bo'lmagan mulkning "ismini" o'qib bo'lmadi, RecipeItemComponent da o'zgarmaydigan deklaratsiyasini tekshiring
qo'shib qo'ydi muallif Bo Chen, manba

6 javoblar

Menga atlayotgan birinchi narsa shabloni ichida resept ga bog'lamaysiz. Siz uning xususiyatlarini o'zlari bilan bog'lashga urinmoqdasiz. Misol uchun, {{name}} o'rniga {{recipe.name}} harakat qilib ko'ring.

Bu erda yana bir xato bor:

 [recipe]="recipe" (click)="onSelected(recipe)">

ilovaning retsepti-elementi selektoridagi yopiq tegga e'tibor bering. Sizning belgilanishingizda hozir yoki yo'qligini bilmayman. Buni shunday tuzing.

 

Nihoyat, retsepti ni retsepti-item -ga bosish uchun nima uchun retsepti -yo'g'ilda asosiy tarkibiy qismda retsepti -ga ega ekanligingizni tushuntira olasizmi? Boshqacha qilib aytganda, ilovaning retsepti-elementi asosiy komponentdan retseptini olishda ko'rinadi. Ota-ona komponentni nima uchun uni boladan olish kerakligi aniq emas.

1
qo'shib qo'ydi
O'z kodingizga kelsak, har kimning ko'zlari yaxshi. (: Qizig'i shundaki, men faqat {{name}} o'rniga {{recipe.name}} ni kiritishingiz kerak deb o'ylayman. , Men buni javobimdan olib tashlayman, men ham nima uchun bilishni xohlayman.
qo'shib qo'ydi muallif J. Adam Connor, manba
Ko'p rahmat, Ko'zlaring menikidan yaxshiroq. Muammo noto'g'ri formatlashtirilgan html edi. Endi u kutilganidek ishlaydi. Yana bir bor rahmat!!
qo'shib qo'ydi muallif Max Bertoli, manba
Siz haqsiz. Men faqatgina sinab ko'rdim va mening savolimga qo'ydim. Hamma narsa bo'lishi kerak :)
qo'shib qo'ydi muallif Max Bertoli, manba

Menga atlayotgan birinchi narsa shabloni ichida resept ga bog'lamaysiz. Siz uning xususiyatlarini o'zlari bilan bog'lashga urinmoqdasiz. Misol uchun, {{name}} o'rniga {{recipe.name}} harakat qilib ko'ring.

Bu erda yana bir xato bor:

 [recipe]="recipe" (click)="onSelected(recipe)">

ilovaning retsepti-elementi selektoridagi yopiq tegga e'tibor bering. Sizning belgilanishingizda hozir yoki yo'qligini bilmayman. Buni shunday tuzing.

 

Nihoyat, retsepti ni retsepti-item -ga bosish uchun nima uchun retsepti -yo'g'ilda asosiy tarkibiy qismda retsepti -ga ega ekanligingizni tushuntira olasizmi? Boshqacha qilib aytganda, ilovaning retsepti-elementi asosiy komponentdan retseptini olishda ko'rinadi. Ota-ona komponentni nima uchun uni boladan olish kerakligi aniq emas.

1
qo'shib qo'ydi
O'z kodingizga kelsak, har kimning ko'zlari yaxshi. (: Qizig'i shundaki, men faqat {{name}} o'rniga {{recipe.name}} ni kiritishingiz kerak deb o'ylayman. , Men buni javobimdan olib tashlayman, men ham nima uchun bilishni xohlayman.
qo'shib qo'ydi muallif J. Adam Connor, manba
Ko'p rahmat, Ko'zlaring menikidan yaxshiroq. Muammo noto'g'ri formatlashtirilgan html edi. Endi u kutilganidek ishlaydi. Yana bir bor rahmat!!
qo'shib qo'ydi muallif Max Bertoli, manba
Siz haqsiz. Men faqatgina sinab ko'rdim va mening savolimga qo'ydim. Hamma narsa bo'lishi kerak :)
qo'shib qo'ydi muallif Max Bertoli, manba

Menga atlayotgan birinchi narsa shabloni ichida resept ga bog'lamaysiz. Siz uning xususiyatlarini o'zlari bilan bog'lashga urinmoqdasiz. Misol uchun, {{name}} o'rniga {{recipe.name}} harakat qilib ko'ring.

Bu erda yana bir xato bor:

 [recipe]="recipe" (click)="onSelected(recipe)">

ilovaning retsepti-elementi selektoridagi yopiq tegga e'tibor bering. Sizning belgilanishingizda hozir yoki yo'qligini bilmayman. Buni shunday tuzing.

 

Nihoyat, retsepti ni retsepti-item -ga bosish uchun nima uchun retsepti -yo'g'ilda asosiy tarkibiy qismda retsepti -ga ega ekanligingizni tushuntira olasizmi? Boshqacha qilib aytganda, ilovaning retsepti-elementi asosiy komponentdan retseptini olishda ko'rinadi. Ota-ona komponentni nima uchun uni boladan olish kerakligi aniq emas.

1
qo'shib qo'ydi
O'z kodingizga kelsak, har kimning ko'zlari yaxshi. (: Qizig'i shundaki, men faqat {{name}} o'rniga {{recipe.name}} ni kiritishingiz kerak deb o'ylayman. , Men buni javobimdan olib tashlayman, men ham nima uchun bilishni xohlayman.
qo'shib qo'ydi muallif J. Adam Connor, manba
Ko'p rahmat, Ko'zlaring menikidan yaxshiroq. Muammo noto'g'ri formatlashtirilgan html edi. Endi u kutilganidek ishlaydi. Yana bir bor rahmat!!
qo'shib qo'ydi muallif Max Bertoli, manba
Siz haqsiz. Men faqatgina sinab ko'rdim va mening savolimga qo'ydim. Hamma narsa bo'lishi kerak :)
qo'shib qo'ydi muallif Max Bertoli, manba

Quyidagilarni asl holatini tekshirib ko'ring: @Input() retsepti: Recipe = yangi Recipe() RecipeItemComponent ichidagi "default" ob'ektidan foydalanib yoki/va jamoat retseptini belgilang: Dastur retsepti ro'yxatida standart Recipe obyekti bilan retsept.

0
qo'shib qo'ydi

Quyidagilarni asl holatini tekshirib ko'ring: @Input() retsepti: Recipe = yangi Recipe() RecipeItemComponent ichidagi "default" ob'ektidan foydalanib yoki/va jamoat retseptini belgilang: Dastur retsepti ro'yxatida standart Recipe obyekti bilan retsept.

0
qo'shib qo'ydi

Quyidagilarni asl holatini tekshirib ko'ring: @Input() retsepti: Recipe = yangi Recipe() RecipeItemComponent ichidagi "default" ob'ektidan foydalanib yoki/va jamoat retseptini belgilang: Dastur retsepti ro'yxatida standart Recipe obyekti bilan retsept.

0
qo'shib qo'ydi
Angular Uzbekistan
Angular Uzbekistan
107 ishtirokchilar

Guruh Angular bo'yicha muloqot qilish uchun ochilgan Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs

ngTashkent
ngTashkent
77 ishtirokchilar

Правила просты: 1. Не хамить 2. Не хейтить 3. Реакт не нужен Ссылки: https://t.me/angular_ru - старший брат https://t.me/angular_uz - ангулар на узбекском @js_uzb @vuejs_uz @react_uz @nodejs_uz @yiiframework_uz @uzdevgroup @UzDev_Jobs @tasdev_talks