组件模板中未定义 Angular 6 元素答案

【问题标题】：Angular 6 element not defined in component template组件模板中未定义 Angular 6 元素
【发布时间】：2019-02-13 19:03:06
【问题描述】：

我使用 Angular 6。我有以下 html

    <table class="table table-sm table-bordered table-striped">
        <tr>
          <th></th>
          <th>Name</th>
          <th>Count Prices</th>
          <th>Average Prices</th>
          <th>Total Prices</th><th></th>
        </tr>
        <tr *ngFor="let item of getCategoriesShortName(); let i = index;">

          <paSummaryCategoryDisplay></paSummaryCategoryDisplay> 
        </tr>
    </table>

我想在一个组件中显示每个表的 td。 paSummaryCategoryDisplay 是

@Component({
  selector: "paSummaryCategoryDisplay",
  template: ` <td style="vertical-align:middle">
                {{item.summaryCategory.totalPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.countPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.averagePrices}}</td>`
})

我得到了错误

Identifier 'item' is not defined. The component declaration, template variable declarations, and element references do not contain such a member

如何将项目从 html 设置到模板？

【问题讨论】：

您需要通过 @Input 将项目传递给组件。
Pass variable to custom component的可能重复
我阅读了这篇文章，但我不明白如何将元素项从我的表格 html 传递到我的模板。我认为在 html 中我无法定义输入

标签： angular

【解决方案1】：

在父组件模板中，通过绑定属性名向子组件传递数据

 <paSummaryCategoryDisplay  [item]="item"></paSummaryCategoryDisplay>

在子组件中使用输入装饰器

@Component({
  selector: "paSummaryCategoryDisplay",
  template: ` <td style="vertical-align:middle">
                {{item.summaryCategory.totalPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.countPrices}}</td>
                <td style="vertical-align:middle" >
                {{item.summaryCategory.averagePrices}}</td>`
})

export class SummaryCategoryDisplay {
  @Input() item: any;
}

用于参考。检查https://angular.io/guide/component-interaction

【讨论】：