时间戳

首页 > 解决方案 > 角度材料选择可选的多项选择

angular - 角度材料选择可选的多项选择

问题描述

您好我正在尝试将角度材料选择包装在共享组件中。除了一件事，一切都像魅力一样运作，那就是“多重”属性。

我正在尝试绑定到“@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>

当我输入 multiple="false" 或 "true" 时，我在 html 文件中尝试过，它可以工作。

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

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

提前致谢！

标签： angularangular-material

解决方案

当您使用以下语法绑定时：

multiple="multiple"

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

multiple="false"

为确保 Angular 正确计算表达式，请使用带括号multiple的属性绑定语法：

[multiple]="multiple"

请参阅此 stackblitz以获取演示。

推荐阅读