单击事件出错无法读取未定义的属性 'stat'

Question

我有一个名为 app.component 的主要组件和一个子组件，如果允许我像 items.component 那样调用它的话。

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);

  }
}

当用户单击 app.component 上显示的项目时，onSelected() 方法将帮助我将数据发送到子组件并显示它。

这是items.component的脚本：

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:

<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 行（由 class ItemsClass:

正确显示时，出现以下错误

EXCEPTION: Error in ./ItemsComponent class ItemsComponent - inline template:2:9 caused by: Cannot read property 'stat' of undefined

我是 angular 2 的新手，有点复杂。

Answer 1

您收到此错误是因为 ItemsComponent（TypeScript class）没有 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;
}

这样 "app component" 会将值传递给 "items component"。

单击事件出错无法读取未定义的属性 'stat'

Error on Click event Cannot read property 'stat' of undefined

angular

eventemitter

单击事件出错无法读取未定义的 属性 'stat'

Error on Click event Cannot read property 'stat' of undefined

angular

eventemitter

单击事件出错无法读取未定义的属性 'stat'