*ngFor 在自定义模板中未定义并在 ul > li 中定义/工作

Question

我相信这不是重复的，因为我花了几个小时没有找到类似的案例。

我刚开始学习Angular。

我不明白为什么 *ngFor 在自定义模板中未定义并在 ul > li 中定义/工作。

下面的代码产生以下结果：

companions-list works!

I am in companion-item.component.html
companion is null
I am in companion-item.component.html
companion is null
I am in companion-item.component.html
companion is null

Companion from UL - LI - name: Alex; rating: 8.4

Companion from UL - LI - name: Ben; rating: 8.2

Companion from UL - LI - name: Charlie; rating: 8.6

同伴-list.component.ts:

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

@Component({
  selector: 'app-companions-list',
  templateUrl: './companions-list.component.html',
  styleUrls: ['./companions-list.component.css']
})
export class CompanionsListComponent implements OnInit {

  companions = [
    {name: 'Alex', rating: 8.4},
    {name: 'Ben', rating: 8.2},
    {name: 'Charlie', rating: 8.6}
  ];

  constructor() { }    
  ngOnInit() {
  }
}

同伴-list.component.html

<div>
  companions-list works!

  <div *ngIf="companions">
    <app-companion-item *ngFor="let companion of companions"></app-companion-item>
  </div>
  <ul>
    <li *ngFor="let companion of companions">
        <div class="boxed">
        Companion from UL - LI - name: {{ companion.name }}; rating: {{ companion.rating }}
        </div>
        <br/>
    </li>
  </ul>
</div>

同伴-item.component.html:

<div class="boxed">
  I am in    companion-item.component.html
  <div *ngIf="companion == null">companion is null</div>
  <div *ngIf="companion">
    companion: name: {{ companion.name }}; rating: {{ companion.rating }}
  </div>
</div>

我错过了什么吗？谢谢

Answer 1

您缺少组件的输入 ([companion]="companion")

<app-companion-item *ngFor="let companion of companions" [companion]="companion"></app-companion-item>

并在你的 app-companion-item class 中使用 @Input('companion') companion: any;（将任何内容更改为另一种类型，如果可能的话制作一个界面）。

查看这些文档Angular Component interaction

*ngFor 在自定义模板中未定义并在 ul > li 中定义/工作

*ngFor is undefined in custom template and defined / works in ul > li

ngfor

angular