Question

我使用Angular6。我有以下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中的项目设置为模板？

Answer 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

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

1 个答案: