Question

您好，我正在尝试将角形材质选择包装到共享组件中。除了只有一件事，一切都像咒符一样工作，那就是“多重”属性。

我正在尝试将“ @Input（）”属性绑定为“多个”，代码如下

dropdown.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>

当我输入倍数=“ false”或“ true”时，我已经尝试了html文件。

但是，当我将其绑定到默认值为“ false”的js文件中的变量“ multiple”时，它始终会激活多项选择行为。

有人知道如何解决这个问题吗？

谢谢！

Answer 1

与以下syntax绑定时：

multiple="multiple"

multiple属性绑定到字符串"multiple"。由于任何非空字符串都是truthy，因此multiple属性被激活。显然，Angular Material将字符串"false"解释为虚假；因此以下语法将关闭选择组件的multiple选项：

multiple="false"

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

[multiple]="multiple"

有关演示，请参见this stackblitz。

角材料选择可选多项选择

1 个答案: