当前位置: 首页 > 知识库问答 >
问题:

角度2-基于所选选项值显示元素[重复]

汪典
2023-03-14

我正在寻找一种最干净的方式来显示一个元素,基于什么是从Angular 2中的表单下拉菜单中选择的。

<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个答案

百里金林
2023-03-14

按照下面的代码,您将得到预期的结果。我加到你代码里的东西

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>
 类似资料:
  • 我想突出显示点击的选定值的背景颜色。我正在演示这个例子,它突出显示了多个选择值。我想在单击以选择一个选项时只突出显示所选的值。

  • 我有一个问题隐藏和显示一个元素取决于一个布尔变量在角2。 这是div要显示和隐藏的代码: 变量已“编辑”,并存储在我的组件中: 元素是隐藏的,当saveTodos函数启动时,会显示元素,但3秒钟后,即使变量返回为false,元素也不会隐藏。为什么?

  • 问题内容: 这是我的代码。为什么不起作用? 问题答案: 您正在加载DOM之前运行代码。 尝试这个: 现场示例:

  • 好的,我有这个 我一直在试着把它显示在视图中。 因为它不是一个json数组,所以angular只是使用 null 编辑 下面是完整的json

  • 问题内容: 我的问题真的很简单:我有一个复选框列表,如下所示: 我想发送一组选定的选项,例如: 如果选择了选项1、5和8。该数组是我想通过HTTP PUT请求发送的JSON的一部分。 谢谢你的帮助! 问题答案: 感谢Gunter,我找到了解决方案!这是我的完整代码,如果它可以帮助任何人: 这是我正在使用的3个对象: 共有3种有用的方法: 1 。启动: 2. 更新: 3. 转换成并将其存储在发送PO

  • 我有两个<代码> 当用户从第一个选择框中选择一个值时,我希望第二个选择框只显示连接的值。 我的代码: 因此,当用户从第一个选择框M中选择“test1”时,他在第二个选择框上只会看到“test2”、“test3”和“test4”;第一个框中的“test2”将在第二个框中显示“test6”、“test7”和“test8”。 如何使用JavaScript解决此问题?