Angular - Как работает ngFor? - PullRequest
Новая
       5

Angular - Как работает ngFor?

0 голосов
/ 01 ноября 2018

Я хочу изменить свой код. У меня есть этот ngFor в моем section-portrait.component.html

<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>

Я хочу выполнить цикл для каждой модели, чтобы отображать там firstName и lastName

И у меня есть эта ошибка:

Uncaught Error: Ошибки синтаксического анализа шаблона: невозможно связать с firstName, так как не является известным свойством 'app-Portrait'.

Что я сделал не так?

1 Ответ

0 голосов
/ 01 ноября 2018

Нет ничего плохого в вашем ngFor. Поздравляем! * * 1002

Однако, ваши 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>
...