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行（由ItemsClass类正确显示时，我收到以下错误：

EXCEPTION：./ ItemsComponent类中的错误ItemsComponent - 内联模板：2：9引起：无法读取未定义的属性'stat'

我是角度2的新手，它有点复杂。

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

这样“app组件”会将值传递给“items component”。

Click事件出错无法读取undefined的属性'stat'

1 个答案: