javascript - angular - element condiționat bazat pe opțiunea mat-select


Cum pot să ating următoarele:

<mat-select formControlName="ctrlName">
    <mat-option *ngFor="let opt of options" [value]="opt.key">
        {{opt.label}}
    </mat-option>
</mat-select>

<div *ngIf=" SHOW IF A CERTAIN OPTION FROM THE LOOPED LIST ABOVE IS SELECTED "></div>

Listă de exemplu de la componentă:

options = [
    { key: 'keyOne', label: 'Key One 1' },
    { key: 'keyTwo', label: 'Key One 2' },
    { key: 'keyThree', label: 'Key One 3' }
]

Răspuns #1

Potrivit site-ului angular material (exemplu aici), trebuie să adaugi [formControl]="selected" la componenta mat-select.

   <mat-select [formControl]="selected">
        <mat-option *ngFor="let opt of options" [value]="opt">
            {{option.label}}
        </mat-option>
    </mat-select>

    <div *ngIf="selected===<your_specific_value>"></div>

Răspunsul #2

Din cauza utilizării formControls, a trebuit să fac referire la întregul formular și să specific valoarea:

*ngIf="form.value.specValue == 'valueName'"