Angular 8+ *ng 不显示 html 中的数据，即使 console.log() 正确打印数据

Question

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

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

代码：

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

child 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();

    [...]

}

Answer 1

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

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

Answer 2

你使用子组件的方式是错误的。

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

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

我建议您将 tr 元素移动到子组件。

Answer 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']
})

这是 Whosebug

中的一个

Angular 8+ *ng 不显示 html 中的数据，即使 console.log() 正确打印数据

Angular 8+ *ngFor not displaying data in html even though console.log() prints the data correctly

angular

typescript

html-table

angular8

ngfor