在 angular 9 中添加 NgFor 破坏 Mat-line flex
Adding NgFor breaking Mat-line flex in angular 9
我需要像下面的例子显示
但是当我添加 ngfor 时它会将 mat line flex 行打断到列中。
HTML
<mat-list *ngFor="let list of lists">
<mat-list-item *ngFor="let car of list.cars | keyvalue">
<h3 mat-line> {{car.key}} </h3>
<p mat-line *ngFor="let year of car.value">
<span> {{year}} </span>
</p>
<button mat-icon-button >
<mat-icon class="mat-24">delete</mat-icon>
</button>
</mat-list-item>
</mat-list>
TS
export class ListSelectionExample {
lists = [
{
"cars":
{
"12345": [1960, 1961],
"4567": [2001, 2002]
}
}
]}
这里是工作示例代码
Slackblitz.example
使用
<p mat-line >
<span *ngFor="let year of car.value; let i = index"> {{year}}{{i==0?',':''}} </span>
</p>
而不是
<p mat-line *ngFor="let year of car.value">
<span> {{year}} </span>
</p>
点击here查看代码
我需要像下面的例子显示
但是当我添加 ngfor 时它会将 mat line flex 行打断到列中。
HTML
<mat-list *ngFor="let list of lists">
<mat-list-item *ngFor="let car of list.cars | keyvalue">
<h3 mat-line> {{car.key}} </h3>
<p mat-line *ngFor="let year of car.value">
<span> {{year}} </span>
</p>
<button mat-icon-button >
<mat-icon class="mat-24">delete</mat-icon>
</button>
</mat-list-item>
</mat-list>
TS
export class ListSelectionExample {
lists = [
{
"cars":
{
"12345": [1960, 1961],
"4567": [2001, 2002]
}
}
]}
这里是工作示例代码 Slackblitz.example
使用
<p mat-line >
<span *ngFor="let year of car.value; let i = index"> {{year}}{{i==0?',':''}} </span>
</p>
而不是
<p mat-line *ngFor="let year of car.value">
<span> {{year}} </span>
</p>
点击here查看代码