Angular 页面显示为空，而组件有许多元素要显示在屏幕上
我们正在尝试将数据对象中的内容放置在行和列中。然而，当我们检查错误时，屏幕显示为空，控制台上显示为未捕获错误，但我们很困惑，无法确定哪些行是完全错误的，以及如何修复它们。键入脚本部分就可以了。似乎所有的错误都在组件的HTML部分。代码如下：Angular 页面显示为空，而组件有许多元素要显示在屏幕上,angular,Angular,我们正在尝试将数据对象中的内容放置在行和列中。然而，当我们检查错误时，屏幕显示为空，控制台上显示为未捕获错误，但我们很困惑，无法确定哪些行是完全错误的，以及如何修复它们。键入脚本部分就可以了。似乎所有的错误都在组件的HTML部分。代码如下： <div class="container justify-content-center"> <div class="row row row-centered justify-content-center" *ngFor="let rest
<div class="container justify-content-center">
<div class="row row row-centered justify-content-center" *ngFor="let restaurant of restaurants; let i = index" *ngIf="i % 3 == 0">
<div class="col-md-3 centered col-md-offset-1">
<span>
<img
[src]="restaurant.imagePath"
alt="{{ restaurant.name }}"
class="img-responsive"
style="max-height: 300px; width:100%;">
</span>
<h2>{{restaurant.name}} </h2>
<h2>{{restaurant.category}} </h2>
<p>{{restaurant.description}} </p>
</div>
<div class="col-md-3 centered col-md-offset-1">
<span>
<img *ngIf="restaurants[$index + 1].imagePath != null" [src]="restaurant[i +
1].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;">
</span>
<h2 *ngIf="restaurants[$index + 1].name != null">{{restaurants[i +
1].name}} </h2>
<h2*ngIf="restaurants[$index + 1].category != null">{{restaurants[i +
1].category}} </h2>
<p *ngIf="restaurants[$index + 1].description != null">{{restaurants[i +
1].description}} </p>
</div>
<div class="col-md-3 centered col-md-offset-1">
<span>
<img *ngIf="restaurants[$index + 2].imagePath != null" [src]="restaurant[i +
2].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;">
</span>
<h2*ngIf="restaurants[$index + 2].name != null">{{restaurants[i +
2].name}} </h2>
<h2*ngIf="restaurants[$index + 2].category != null">{{restaurants[i +
2].category}} </h2>
<p *ngIf="restaurants[$index + 2].description != null">{{restaurants[i +
2].description}} </p>
</div>
</div>
</div>
</div>
{{餐厅名称}
{{餐厅.类别}
{{餐厅.说明}
{{餐厅[i]+
1] .name}
{{餐厅[i]+
1] .category}
{{{餐馆[i]+
1] .description}
{{餐厅[i]+
2] .name}
{{餐厅[i]+
2] .category}
{{{餐馆[i]+
2] .description}
怎么了？我们如何修复这些错误并使其在浏览器上显示组件？在HTML模板中，您在同一元素上使用了ngFor和ngIf，但根据，每个主体元素只能使用一个结构指令 您可以根据使用以下语法，并在ng模板内的div上使用ngIf
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<div>...</div>
</ng-template>
...
// Component
public items = new Array(Math.round(this.restaurents.length/3));
//Template
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<my-col [data]="itmes[i*3]" ngIf="itmes[i*3]">...</my-col>
<my-col [data]="itmes[i*3 + 1]" ngIf="itmes[i*3 + 1]">...</my-col>
<my-col [data]="itmes[i*3 + 2]" ngIf="itmes[i*3 + 2]">...</my-col>
</ng-template>
//组件
公共项=新数组（Math.round（this.restaurents.length/3））；
//模板
...
...
...
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<div>...</div>
</ng-template>
...
// Component
public items = new Array(Math.round(this.restaurents.length/3));
//Template
<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByFn">
<my-col [data]="itmes[i*3]" ngIf="itmes[i*3]">...</my-col>
<my-col [data]="itmes[i*3 + 1]" ngIf="itmes[i*3 + 1]">...</my-col>
<my-col [data]="itmes[i*3 + 2]" ngIf="itmes[i*3 + 2]">...</my-col>
</ng-template>
//组件
公共项=新数组（Math.round（this.restaurents.length/3））；
//模板
...
...
...
<div class="container-fluid">
<div *ngFor="let restaurant of restaurants; let i = index" >
<div class="row row-centered justify-content-center" *ngIf="i % 3 === 0">
<div class="col-md-3 centered">
<img
[src]="restaurants[i].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;"/>
<h2>{{restaurants[i].name}} </h2>
<h3>{{restaurants[i].category}} </h3>
<p>{{restaurants[i].description}} </p>
</div>
<div class="col-md-3 centered">
<img
[src]="restaurants[i + 1].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;"/>
<h2>{{restaurants[i + 1].name}} </h2>
<h3>{{restaurants[i + 1].category}} </h3>
<p>{{restaurants[i + 1].description}} </p>
</div>
<div class="col-md-3 centered">
<img
[src]="restaurants[i+2].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;"/>
<h2>{{restaurants[i+2].name}} </h2>
<h3>{{restaurants[i+2].category}} </h3>
<p>{{restaurants[i+2].description}} </p>
</div>
</div>
</div>
</div>
{{餐厅[i].name}
{{餐厅[i].类别}
{{餐厅[i].说明}
{{餐厅[i+1].名称}
{{餐厅[i+1]。类别}
{{餐厅[i+1]。说明}
{{餐厅[i+2].名称}
{{餐厅[i+2]。类别}
{{餐厅[i+2]。说明}
<div class="container-fluid">
<div *ngFor="let restaurant of restaurants; let i = index" >
<div class="row row-centered justify-content-center" *ngIf="i % 3 === 0">
<div class="col-md-3 centered">
<img
[src]="restaurants[i].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;"/>
<h2>{{restaurants[i].name}} </h2>
<h3>{{restaurants[i].category}} </h3>
<p>{{restaurants[i].description}} </p>
</div>
<div class="col-md-3 centered">
<img
[src]="restaurants[i + 1].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;"/>
<h2>{{restaurants[i + 1].name}} </h2>
<h3>{{restaurants[i + 1].category}} </h3>
<p>{{restaurants[i + 1].description}} </p>
</div>
<div class="col-md-3 centered">
<img
[src]="restaurants[i+2].imagePath"
class="img-responsive"
style="max-height: 300px; width:100%;"/>
<h2>{{restaurants[i+2].name}} </h2>
<h3>{{restaurants[i+2].category}} </h3>
<p>{{restaurants[i+2].description}} </p>
</div>
</div>
</div>
</div>
{{餐厅[i].name}
{{餐厅[i].类别}
{{餐厅[i].说明}
{{餐厅[i+1].名称}
{{餐厅[i+1]。类别}
{{餐厅[i+1]。说明}
{{餐厅[i+2].名称}
{{餐厅[i+2]。类别}
{{餐厅[i+2]。说明}