Angular 2 - 根据选择的选项值显示元素[重复]

Posted 2023-03-05

【中文标题】Angular 2 - 根据选择的选项值显示元素[重复]

【英文标题】：Angular 2 - Show element based on option value selected [duplicate]

【发布时间】：2018-03-24 05:50:43

【问题描述】：

我正在寻找基于从 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' ];

我做错了什么？

感谢您对此的帮助。

【参考方案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>

【讨论】：

这对我不起作用！我应该在组件中导入任何东西吗？

只有角芯需要在组件上导入。你在组件中声明了 selectedNav 吗？

现在可以工作了...有一个控制台问题阻止它工作-“错误错误：如果在表单标签中使用 ngModel，则必须设置名称属性或必须设置表单控件在 ngModelOptions 中被定义为‘独立’。”感谢您的帮助

@Dboi 感谢您的评论！！甚至我也在使用表单控件。