Angular 角度材质选择可选的多次选择

您好，我正在尝试将“角度材质选择”包装到共享组件中。所有的东西都像一个魔咒，除了一件事，那就是“多重”属性

我正在尝试绑定到“@Input（）”属性“multiple”，代码如下

下拉列表.component.ts

import { Component, Input } from '@angular/core';

@Component({
    selector: 'dropdown',
    templateUrl: './dropdown.component.html',
    styleUrls: ['./dropdown.component.scss']
})
export class DropdownComponent {
    @Input() dropdownLabel: string;
    @Input() categorized: boolean = false;
    @Input() multiple: boolean = false;
    @Input() data: any[] = [];
}

dropdown.component.html

<mat-form-field>
    <mat-label>{{ dropdownLabel }}</mat-label>
    <mat-select multiple="multiple">
        <!-- If is categorized add groups -->
        <ng-container *ngIf="categorized">
            <mat-optgroup *ngFor="let group of data" [label]="group.name">
                <mat-option *ngFor="let item of group.children" [value]="item">{{ item.name }}</mat-option>
            </mat-optgroup>
        </ng-container>

        <!-- if is not categorized add elements without groups -->
        <ng-container *ngIf="!categorized">
            <mat-option *ngFor="let item of data" [value]="item">{{ item.name }}</mat-option>
        </ng-container>
    </mat-select>
</mat-form-field>

{{dropdownLabel}}
{{item.name}
{{item.name}

我在html文件中尝试过，当我键入multiple=“false”或“true”时，它可以工作

但是，当我将它绑定到js文件中的变量“multiple”（默认值为“false”）时，它总是激活多重选择行为

你知道怎么解决这个问题吗

---

提前谢谢

当您绑定以下内容时：

multiple

属性绑定到字符串

“multiple”

。由于任何非空字符串都是空的，因此激活了

多个
属性。显然，角度材质将字符串
“false”
解释为falsy；因此，以下语法将关闭选择组件的
multiple
选项：

multiple="false"

要确保Angular正确计算表达式
multiple
，请使用以下属性绑定语法：

请参见演示

multiple="false"

[multiple]="multiple"