Angular-ngFor如何工作？

Question

我想重新验证我的代码。 我的section-portrait.component.html有这个ngFor

<app-portrait *ngFor="let model of models"
      [firstName]="model.firstName"
      [lastName]="model.lastName"
    ></app-portrait>

这是我的portrait.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-portrait',
  templateUrl: './portrait.component.html',
  styleUrls: ['./portrait.component.scss']
})
export class PortraitComponent implements OnInit {
  firstName: string;
  lastName: string;

  constructor() {
  }

  ngOnInit() {
  }
}

还有我的portrait.component.html

<h4>
  <a href="#">{{ firstName }} {{ lastName }}</a>
</h4>

我想在每个模型上循环显示那里的名字和姓氏

我有这个错误：

未捕获的错误：模板解析错误：无法绑定到“名字”，因为它不是“应用程序肖像”的已知属性。

我做错了什么？

Answer 1

您的ngFor没有任何问题。 恭喜！

但是，您的Component的属性指定不正确。 如果要使用HTML中的值注入它们，则需要通过@Input公开它们。

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-portrait',
  templateUrl: './portrait.component.html',
  styleUrls: ['./portrait.component.scss']
})
export class PortraitComponent implements OnInit {
  @Input() firstName: string;
  @Input() lastName: string;

  constructor() {
  }

  ngOnInit() {
  }
}

如果您愿意，您可能有兴趣进一步进行以下操作：

@Input() model: Model;

<app-portrait *ngFor="let model of models" [model]="model"></app-portrait>