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>

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

我有这个错误：

未捕获的错误：模板解析错误：由于无法绑定到“名字” 不是'app-portrait'的已知属性。

我做错了什么？

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>

Angular-ngFor如何工作？

1 个答案: