Javascript 未呈现子数据绑定的Angular8 NG8

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

console.log显示了阵列

子组件有一个复选框，该复选框被渲染；不提供人员姓名、状态和部门。我遵循了这些确切的步骤：下面是代码：

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>

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

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

{{personite.name}
{{personite.status}
{{personite.department}}
X

child.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]);
      });
  }

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() {}
}

导入{
组成部分，
奥尼特，
输入，
产出，
事件发射器，
变更检测策略
}从“@角度/核心”；
从“./People”导入{People}；
@组成部分({
选择器：“应用程序人员”，
templateUrl:“./people.component.html”，
样式URL:[“/people.component.css”]，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类PeopleComponent实现OnInit{
人=[]；
化身=[]；
@输入（）个人主义：人；
@Output（）select=neweventemitter（）；
@Output（）remove=neweventemitter（）；
构造函数（）{}
ngOnInit（）{}
}

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

您的孩子组件正在使用策略OnPush，这意味着每次输入更改时，它都不会更新组件。要解决这个问题，只需添加一个OnChanges生命周期，就可以在构造函数中注入changedtectionref并在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();
  }
}

@组件({
选择器：“应用程序人员”，
templateUrl:“./people.component.html”，
样式URL:[“/people.component.css”]，
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类PeopleComponent实现OnInit、OnChanges{
人=[]；
化身=[]；
@输入（）个人主义：人；
@Output（）select=neweventemitter（）；
@Output（）remove=neweventemitter（）；
构造函数（私有cdr:ChangeDetectionRef）{}
ngOnInit（）{}
ngOnChanges（）{
this.cdr.detectChanges（）；
}
}

---

或者您可以删除

changeDetection:ChangeDetectionStrategy.OnPush

行，一切正常。

共享人员文件您的代码应该正常，检查您的模型属性名称用户在分配值和html绑定时是否使用了正确的语法。未呈现该属性名称的原因可能是由于

*ngIf

指令中的条件为

false

。我还可以看到，您正在

AppComponent

中调用get请求并存储数组，但尚未将其传递给子组件，您正在

*ngFor

@user3875919中对其进行迭代。我相信数组是使用[personite]的数据绑定传递的=父项中的person，然后子项中的personItem.name等。既然这样做不起作用，我怎么才能将数组传递给子对象呢？它必须保留在ngFor循环的父组件中。当我将数组添加到父组件和子组件时，每个数组项都会输出一次console.log射线。@kamprasad-我想你是对的，但是我在人员模型中的约定与我在子组件中调用属性的方式相匹配。我看不到导致数据无法呈现的问题，它编译时不会出错。缺少什么？“类型'ChangeDetectionStrategy'上不存在属性'detectChanges'。您必须注入ChangeDetectionRef，而不是ChangeDetectionStrategyI向子组件导入添加了ChangeDetectorRef并实现了此功能，但子数据中仍然没有响应。确定，然后你删除了changeDetection:ChangeDetectionStrategy.OnPush line？是的，有和没有试过。我觉得有点奇怪。