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>

Angular 2 - 根据选择的选项值显示元素

Angular 2 - Show element based on option value selected

angular2-ngmodel

angular