Clickイベントのエラー未定義のプロパティ 'stat'を読み取ることができません

Question

app.componentと呼ばれるメインコンポーネントと、items.componentという名前のように呼び出すことができるサブコンポーネントがあります。

app.componentのスクリプトは次のとおりです。

onSelected（）メソッドは、サブコンポーネントにデータを送信するために私を助けるとアイテム上のユーザーのクリックがapp.component上に表示されたときに、それを表示します

import { Component, EventEmitter, Output } from '@angular/core'; 
import { ItemsClass } from './items-class'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    list:ItemsClass = new ItemsClass('Product 1', 'Electronics', 'Sold Out'); 
    @Output() EmitData = new EventEmitter<ItemsClass>(); 

    onSelected(list:ItemsClass){ 

    this.EmitData.emit(list); 

    } 
} 

。ここで今

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-items', 
    templateUrl: './items.component.html', 
    styleUrls: ['./items.component.css'] 
}) 
export class ItemsComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 
} 

app.componentのHTMLです：：ここで

はitems.componentのスクリプトです

<div class="col-md-4" > 
    <a class="btn btn-success">New Recipe</a> 
</div> 
<a href="#" class="list-group-item clearfix"> 
<hr> 
    <div class="col-md-4"> 
    <ul class="list-group"> 
    {{list.name}} 
    </ul> 
    {{list.desc}} | {{list.stat}} 
    </div> 
</a> 
<app-items (click)="onSelected(list)"></app-items> 

items.component.html：

<div class="row"> 
    <div class="col-xs-12"> 
    <img src="{{list.stat}}" alt="" class="img-responsive"> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
    <h1>{{list.name}}</h1> 
    </div> 
    <div class="col-xs-12"> 
    <button class="btn btn-success">To Shopping List</button> 
    <button class="btn btn-primary">Edit</button> 
    <button class="btn btn-danger">Delete</button> 
    </div> 
</div> 
<hr> 
<div class="row"> 
    <div class="col-xs-12"> 
    <p>{{list.desc}}</p> 
    </div> 
</div> 
<div class="row"> 
    <div class="col-xs-12"> 
    Ingredients 
    </div> 
</div> 

製品1の行をクリックすると、次のエラーが表示されます（クラスで正しく表示されます）。：

例外：./ItemsComponentクラスItemsComponentでエラーが発生しました - インライン テンプレート：2：9によって引き起こさ：私は、角2とそれに新しいです未定義

のプロパティ 'STAT' を読み込めません少し複雑です。

Answer 1

ItemsComponent（TypeScriptクラス）にlistプロパティがないため、このエラーが発生しています。

Angular 1では、Angular 2+では基本的に各コンポーネントがスコープを分離しており、祖先スコープにアクセスすることはできません。

は、この問題を解決するにはapp.component.htmlにあなたが必要とする：

<app-items [list]="list" (click)="onSelected(list)"></app-items> 

items.component.tsで次に

：

export class ItemsComponent { 
    @Input() list; 
} 

この方法で "アプリ成分" に値を渡します"itemsコンポーネント"。