[英]Angular 8+ *ngFor not displaying data in html even though console.log() prints the data correctly
i am trying to display a list of tuitions in a table with separate component for each result in the list using *ngFor, but html is not displaying it.我正在尝试使用 *ngFor 在列表中显示每个结果的单独组件的表中的学费列表,但 html 没有显示它。
console.log()
prints the data(list of tuitions) correctly: console log data console.log()
正确打印数据(学费列表):控制台日志数据tr
: inspect element tab resulttr
:检查元素选项卡结果Code:代码:
parent html file父 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
file子 html tution
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
file 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();
[...]
}
The way your use your child component is wrong.您使用子组件的方式是错误的。
The tr element in parent HTML file should be父 HTML 文件中的 tr 元素应为
<tr class="" *ngFor="let tution of searchedTuitions">
<app-tution-table-list-row [tution]='tution'></app-tution-table-list-row>
</tr>
And I suggest you move tr element to the child component.我建议您将 tr 元素移至子组件。
You are using an element-selector in your TutionTableListRowComponent
component.您在
TutionTableListRowComponent
组件中使用了元素选择器。 So, if you want to display that component you will have to use:因此,如果要显示该组件,则必须使用:
<app-tution-table-list-row></app-tution-table-list-row>
And not:并不是:
<tr app-tution-table-list-row></td>
If you want your component to be used like that, you need to update your selector to be an attribute selector that way (notice the [
]
around the selector):如果您希望这样使用您的组件,则需要以这种方式将选择器更新为属性选择器(注意选择器周围的
[
]
):
@Component({
selector: '[app-tution-table-list-row]',
templateUrl: './tution-table-list-row.component.html',
styleUrls: ['./tution-table-list-row.component.css']
})
Here is a link to a similar question in stackOverflow这是stackOverflow中类似问题的链接
Just use the component selector like a html tag.只需使用 html 标签之类的组件选择器。 eg:
例如:
<app-tution-table-list-row
*ngFor="let tution of searchedTuitions"
[tution]='tution'
(viewEvent)='viewEvent($event)'>
</app-tution-table-list-row>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.