即使 console.log() 正确打印数据，Angular 8+ *ngFor 也不在 html 中显示数据答案

【问题标题】：Angular 8+ *ngFor not displaying data in html even though console.log() prints the data correctly即使 console.log() 正确打印数据，Angular 8+ *ngFor 也不在 html 中显示数据
【发布时间】：2021-07-12 13:24:43
【问题描述】：

我正在尝试使用 *ngFor 在表格中显示学费列表，其中每个结果的每个结果都有单独的组件，但 html 没有显示它。

console.log() 正确打印数据（学费列表）： console log data
inspect 中的元素选项卡还显示生成的tr： inspect element tab result
但是 html 没有显示列表：empty table

代码：

父 html 文件

<div class="card">
            <h5 class="p-2 py-3">Find Tuitions By ID</h5>
            <table class="table table-responsive-sm">
                <thead class="thead-light font-weight-bold">
                    <tr>
                        <td scope="col">Tuition Id</td>
                        <td scope="col">Tuition Name</td>
                        <td scope="col">Classes</td>
                        <td scope="col">City</td>
                        <td scope="col">Action</td>
                    </tr>
                </thead>
                <tbody class="w-100">

                    <tr class="" app-tution-table-list-row *ngFor="let tution of searchedTuitions" [tution]='tution'
                        (viewEvent)='viewEvent($event)'>
                    </tr>

                </tbody>
            </table>
        </div>

子 html tution-table-list-row.html 文件

<td scope="col" class="text-danger">{{tution.tutionId}}</td>
<td scope="col">{{tution.tutionName}}</td>
<td scope="col">{{tution.listOfClasses}}</td>
<td scope="col">{{tution.teacher.city}}</td>
<td>
    <div class="row">
       <div class="col-6">
        <button class="button btn btn-sm btn-danger my-1" routerLink="/verification-page"
            [queryParams]="{id: tution.teacher.userId}">View</button>
       </div>
    </div>
</td>

tution-table-list-row.ts文件

@Component({
  selector: 'app-tution-table-list-row',
  templateUrl: './tution-table-list-row.component.html',
  styleUrls: ['./tution-table-list-row.component.css']
})
export class TutionTableListRowComponent {
    @Input('tution') 
    tution: Tution;
    @Output()
    viewEvent = new EventEmitter();

    [...]

}

【问题讨论】：

你能给我看一张你的console.log输出的照片吗？？

标签： angular typescript html-table angular8 ngfor

【解决方案1】：

只需像使用 html 标签一样使用组件选择器。例如：

<app-tution-table-list-row 
  *ngFor="let tution of searchedTuitions" 
  [tution]='tution'
  (viewEvent)='viewEvent($event)'>
</app-tution-table-list-row>

【讨论】：

导致整个被强制为单列，使用属性选择器解决了这个问题，谢谢

【解决方案2】：

你使用子组件的方式不对。

父 HTML 文件中的 tr 元素应该是

<tr class=""  *ngFor="let tution of searchedTuitions">
      <app-tution-table-list-row [tution]='tution'></app-tution-table-list-row>
</tr>

而且我建议你将 tr 元素移到子组件中。

【讨论】：

谢谢 :)，我尝试了该解决方案，但该解决方案导致整个被强制进入单列。使用属性选择器解决了问题

【解决方案3】：

您在 TutionTableListRowComponent 组件中使用了元素选择器。因此，如果您想显示该组件，您将不得不使用：

<app-tution-table-list-row></app-tution-table-list-row>

而不是：

<tr app-tution-table-list-row></td>

如果你希望你的组件被这样使用，你需要将你的选择器更新为一个属性选择器（注意选择器周围的[]）：

@Component({
  selector: '[app-tution-table-list-row]',
  templateUrl: './tution-table-list-row.component.html',
  styleUrls: ['./tution-table-list-row.component.css']
})

这是stackOverflow中的link to a similar question

【讨论】：