Angular8 ngFor子数据绑定不呈现

Question

我对 Angular 并不陌生，我希望这段代码能够呈现父级提供的数据（也许 Angular8 改变了语法）。也许我对此很陌生。具体的问题是为什么在父 ngFor 循环中列出的具有数据绑定的子组件没有呈现列表中的数据。

console.logs 显示数组。

子组件有一个被渲染的复选框；不呈现人名、状态和部门。我遵循了这些确切的步骤：https://www.youtube.com/watch?v=FGStS1hD5Y4 这是代码：

parent.component.html:

<div>Json results:</div>
<table>
  <tr>
    <th></th>
    <th>Name</th>
    <th>Status</th>
    <th>Department</th>
  </tr>
  <tr>
    <td>
      <app-people
        *ngFor="let person of people"
        [personItem]="person"
      ></app-people>
    </td>
  </tr>
</table>

<router-outlet></router-outlet>

parent.component.ts：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { PeopleService } from './people.service';
import { People } from './people';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  people = [];
  avatars = [];
  constructor(private peopleService: PeopleService, private http: HttpClient) {
    this.http
      .get(`assets/people.json`)
      .toPromise()
      .then(data => {
        console.log(data);

        for (let key in data)
          if (data.hasOwnProperty(key)) this.people.push(data[key]);
      });

    this.http
      .get(`assets/avatars.json`)
      .toPromise()
      .then(data => {
        console.log(data);

        for (let key in data)
          if (data.hasOwnProperty(key)) this.avatars.push(data[key]);
      });
  }

child.component.html：

<div class="people-container">
  <input
    type="checkbox"
    [checked]="person.isSelected"
    (change)="complete.emit($event.target.checked)"
  />
  <span [ngClass]="{ selected: person.isSelected }" class="person-title">
    <table>
      <tr>
        <ng-container *ngFor="let img of avatars">
          <td *ngIf="personItem.id == img.id"><img [src]="img.avatar" /></td>
        </ng-container>
        <td>{{ personItem.name }}</td>
        <td>{{ personItem.status }}</td>
        <td>{{ personItem.department }}</td>
      </tr>
    </table>
  </span>

  <button (click)="remove.emit(person.id)">X</button>
</div>

child.component.ts：

import {
  Component,
  OnInit,
  Input,
  Output,
  EventEmitter,
  ChangeDetectionStrategy
} from "@angular/core";
import { People } from "../people";
@Component({
  selector: "app-people",
  templateUrl: "./people.component.html",
  styleUrls: ["./people.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PeopleComponent implements OnInit {
  people = [];
  avatars = [];
  @Input() personItem: People;
  @Output() select = new EventEmitter<boolean>();
  @Output() remove = new EventEmitter<number>();

  constructor() {}

  ngOnInit() {}
}

如果还有什么需要请询问。

Answer 1

您的子组件正在使用 OnPush 策略，这意味着每次输入更改时它都不会更新组件。要解决这个问题，只需添加一个 OnChanges 生命周期，在构造函数中注入 ChangeDetectionRef 并在 OnChanges 中触发它。

@Component({
  selector: "app-people",
  templateUrl: "./people.component.html",
  styleUrls: ["./people.component.css"],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PeopleComponent implements OnInit, OnChanges {
  people = [];
  avatars = [];
  @Input() personItem: People;
  @Output() select = new EventEmitter<boolean>();
  @Output() remove = new EventEmitter<number>();

  constructor(private cdr: ChangeDetectionRef) {}

  ngOnInit() {}

  ngOnChanges() { 
    this.cdr.detectChanges();
  }
}

或者您可以删除 changeDetection: ChangeDetectionStrategy.OnPush 行，一切都会正常。