英文:
Dsiplay MatChips only if the observable has less then nine entries
问题
以下是翻译好的部分：
<mat-chip-list *ngIf="selectedAttributes$ | async as attributes">
<div *ngFor="let attribute of attributes">
<mat-chip *ngIf="attribute.isSelected">{{attribute.label}}
<button matChipRemove
(click)="onChipClose(attribute.label)">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</div>
</mat-chip-list>
selectedAttributes$: Observable<SearchSettings[]> = this.searchSettingsService.searchSettings$;
*ngIf="(selectedAttributes$ | async)?.length < 9"
请注意，我已将您提供的代码中的 HTML 和 TypeScript 部分进行了翻译，但没有进行其他额外的回答。
英文:
I have a mat-chip-list with an ngFor and the matchips shall only be displayed if the array of my observable has less then nine entries.
This is my HTML:
<mat-chip-list *ngIf="selectedAttributes$ | async as attributes">
<div *ngFor="let attribute of attributes">
<mat-chip *ngIf="attribute.isSelected">{{attribute.label}}
<button matChipRemove
(click)="onChipClose(attribute.label)">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</div>
</mat-chip-list>
This is my Obserable:
selectedAttributes$: Observable<SearchSettings[]> = this.searchSettingsService.searchSettings$;
I tried to add another div with an if condition like this:
*ngIf="(selectedAttributes$ |async)?.lenght < 9"
but it did not work out.
答案1
得分: 0
请看以下翻译：
<ng-container *ngIf="selectedAttributes$ | async as attributes">
<mat-chip-list *ngIf="attributes.length < 9">
<div *ngFor="let attribute of attributes">
<mat-chip *ngIf="attribute.isSelected">{{attribute.label}}
<button matChipRemove
(click)="onChipClose(attribute.label)">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</div>
</mat-chip-list>
</ng-container>
英文:
Try this:
<ng-container *ngIf="selectedAttributes$ | async as attributes"
<mat-chip-list *ngIf="attributes.length < 9">
<div *ngFor="let attribute of attributes">
<mat-chip *ngIf="attribute.isSelected">{{attribute.label}}
<button matChipRemove
(click)="onChipClose(attribute.label)">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</div>
</mat-chip-list>
</ng-container>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论