Angular 2 - Показать элемент на основе выбранного значения параметра

Question

Я ищу самый чистый способ показать элемент на основе того, что выбрано из выпадающего меню формы в Angular 2.

Я попробовал несколько разных техник, но все же не повезло!

Вот что у меня сейчас есть:

HTML:

<fieldset class="full-width sm-padding">
    <label>What existing cover do you already have?</label>
    <select id="existingCover" [(ngModel)]="selectedNav">
        <option *ngFor="let dropDown of existingCoverList">
            {{dropDown.option}}
        </option>
    </select>
</fieldset>


<div *ngIf="selectedNav === 'Cover1'">Show this element if option 1 is selected!</div>

МАШИНОПИСЬ:

existingCoverList: any[] = [
    { option: 'Cover1' },
    { option: 'Cover2' },
    { option: 'Cover3' }];

Что я делаю неправильно?

Спасибо за вашу помощь в этом.

Answer 1

Следуя приведенному ниже коду, вы получите ожидаемый результат. Эту вещь я добавил в твой код

HTML:

<fieldset class="full-width sm-padding">
    <label>What existing cover do you already have?</label>
    <select id="existingCover" [(ngModel)]="selectedNav">
        <option [value]="dropDown.option" 
            *ngFor="let dropDown of existingCoverList">
            {{dropDown.option}}
        </option>
    </select>
</fieldset>


<div *ngIf="selectedNav === 'Cover1'">Show this element if option 1 is selected!</div>