Угловой выбор материала Опциональный выбор нескольких вариантов

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>

Я пробовал в html-файле, когда я набираю несколько = "false" или "true", это работает.

Но когда я связываю его с переменной «множественные» в моем js-файле со значением по умолчанию «false», это всегда активирует поведение множественного выбора.

Есть идеи, как обойти это?

Заранее спасибо!

Answer 1

При связывании со следующим синтаксисом :

multiple="multiple"

свойство multiple привязано к строке "multiple". Поскольку любая непустая строка truey , свойство multiple активируется. По-видимому, Angular Material интерпретирует строку "false" как ложь; так что следующий синтаксис отключает опцию multiple компонента select:

multiple="false"

Чтобы убедиться, что Angular правильно вычисляет выражение multiple, используйте синтаксис привязки свойств с скобками :

[multiple]="multiple"

См. этот стек для демонстрации.