Question

在我的组件中，我有很多选项，例如：

options = [
    {
      name: 'option 1'
    },
    {
      name: 'option 2'
    },
    {
      name: 'option 3'
    }
];

然后在我看来，我有多个选择：

<form>
    <mat-form-field>
        <mat-select>
            <mat-option *ngFor="let o of options" 
            [value]="o">{{o.name}}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select>
            <mat-option *ngFor="let o of options" 
            [value]="o">{{o.name}}</mat-option>
        </mat-select>
    </mat-form-field>

    <mat-form-field>
        <mat-select>
            <mat-option *ngFor="let o of options" 
            [value]="o">{{o.name}}</mat-option>
        </mat-select>
    </mat-form-field>
</form>

所有人都使用相同的options数组。我想要实现的是：

如果在第一选择中选择了选项1：第二和第三选择只有选项2和3。然后，例如，如果第三选择选择选项2，则第二选择只剩下选项（选项3）。

另外options个HTML数组和mat-select个HTML元素是动态的，例如，我可以拥有：

options.lenght = 3和2x mat-select

options.lenght = 2和2x mat-select

options.lenght = 2和1x mat-select

...等等

感谢您的帮助。

Answer 1

我相信您可以向每个选项添加另一个属性，以表明是否选择了该选项。然后，当单击它时，您可以更改该属性，并使用* ngIf来控制显示。另外，您可以通过将输入的标签作为另一个属性传递来跟踪选择了哪个选项。

options = [
    {
      name: 'option 1',
      selected: false,
      labelName: ""
    },
    {
      name: 'option 2',
      selected: false,
      labelName: ""
    },
    {
      name: 'option 3',
      selected: false,
      labelName: ""
    }
];

希望我已正确理解您要执行的操作。

角度-具有一个选项数组的多重选择

1 个答案: