Question

我有一个带有多个选项的mat-selection-list，我希望当选择一个选项时，所有其他选项都消失，而取消选择该选项时，所有其他选项都重新出现。

如果还有另一种更好的方法，我想知道。

我尝试放置一个ngIf，其中如果未选择任何内容，则所有内容都会出现，并且如果选择了某些内容，则只会保留所选的选项。

<mat-selection-list #flightsList [(ngModel)]="selectedFlight" (ngModelChange)="onFlightSelection($event)">
    <h3 mat-subheader>Selecciona el vuelo</h3>
    <ng-container *ngFor="let flight of flights">
        <mat-list-option [value]='flight' #option *ngIf="selectedFlight.length == 0 || option.selected">
             {{ flight.name }}
        </mat-list-option>
    </ng-container>
</mat-selection-list>

选择不起作用，它给我控制台错误

错误是“未定义的选项”，我想这是因为消失时没有#option

Answer 1

为此，您应该考虑使用一个简单的下拉菜单，可以选择使用mat-select或本机HTML select。

但是对于至少多个不断变化的飞行对象，至少不应使用一个唯一的#option视图参考。在您的* ngFor中添加一个索引，并以该索引为参考：

*ngFor="let flight of flights; let i = index"
   <mat-list-option #i></mat-list-option> ....

Answer 2

您可以使用

[style.visibility]="(option.selected || selectedFlight.length == 0) ? 'visible' : 'hidden'"

代替

*ngIf="selectedFlight.length == 0 || option.selected"

但是我建议使用disabled，因为隐藏的项目仍然会占据页面上的空间

[disabled]="!(option.selected || selectedFlight.length == 0)"

查看此工作示例

https://stackblitz.com/edit/angular-selection-pqzs3b

如何使选项在垫选择列表中显示和消失？

2 个答案: