时间戳

首页 > 解决方案 > 在模板中使用 ngFor 和 @Input 装饰器显示多个相同组件

angular - 在模板中使用 ngFor 和 @Input 装饰器显示多个相同组件

问题描述

我在我的外部组件模板中使用 ngFor 循环，通过单向绑定和 @Input 装饰器显示多个内部组件。

注意：出于隐私原因，我使用命名替代品。

外模板：

<h1>Things</h1>
<ul>
  <li *ngFor="let obj of objects">
    <app-inner-component [object]="obj"></app-inner-component>
  </li>
</ul>

外TS码

export class DashboardComponent implements OnInit {
  object = [
     new Object('firstObject'),
     new Object('secondObject')
  ];
...

对象模型

export class Object {
   private name: string;

   constructor(name: string) {
      this.name = name;
   }
}

内部组件模板

<h2>{{this.name}}</h2>

内部组件 TS 代码

export class InnerComponent implements OnInit {
  @Input() object: Object;

渲染的 Outer 模板仅显示一个要点（不显示名称）。当我注释掉 HTML 选择器时app-inner-component，会出现两个要点。

我希望外部模板为：

事物

-firstObject

-secondObject

标签： angular

解决方案

我能看到的第一件事是this模板<h2>{{this.name}}</h2>中的存在，它不应该存在于模板中。

你的模板应该是<h2>{{object.name}}</h2>

推荐阅读