角度下拉选择 - 如何从打字稿设置默认值答案

【问题标题】：Angular dropdown select - how to set default value from typescript角度下拉选择 - 如何从打字稿设置默认值
【发布时间】：2020-07-20 10:07:55
【问题描述】：

如何在Select中设置默认值？

我正在尝试使用多个选项创建时间下拉选择。现在。 selectedTimeOption 正确识别我们是否从下拉列表中选择一个选项，但无法检测到我最初尝试从 Typescript 显示的值。

我想在选择之前先在选择框中显示一个预定义的值（它基本上来自另一个页面）

如何实现？

TS组件或html有问题吗？如果有人可以在 stackblitz.com 上用小的工作示例进行解释，那将很有帮助。

HTML:
        <select 
        
            [value]="selectedTimeOption"       
            (valueChange)="setTime($event)"
        >

        <option 
              "let option of timeOfOptions"
              [value]="option"
           >
                    {{ option.label }}
                
        </option>
        </select>
   
TS:
          timeOptions:TimeItems[] =[ 
          { label: '0:00', value: '0' }, 
          { label: '1:00', value: '1' }, 
          { label: '2:00', value: '2' }, 
          ];

【问题讨论】：

你的值应该在里面选择标签
哪些值？很高兴了解
你必须修改你的问题。你不应该在选项标签中使用选项作为变量名，你应该使用 *ngFor 来迭代数组
我知道这一点。这些都得到了照顾。我刚刚离开它是因为它在发布问题时抛出了一些错误。
这可能会帮助你stackoverflow.com/a/63192748/13596406

标签： javascript html angular

【解决方案1】：

您可以在这里查看他的stackblitz 示例，

在哪里，您可以在示例中初始化要首先显示的值（正如您从另一个组件中所说的那样），

firstSelectValue = 'one';

然后在你的模板中，在你的元素中，你可以有一个“getter”，在给定的例子中，它是，

*ngFor="let opt of firstSelectOptions"

【讨论】：

感谢提供示例。那太棒了。我已经用更多细节编辑了这个问题。我有要显示的 firstSelectValue 初始值来自另一个组件。如果您能解释如何在示例组件中实现它会很棒？

【解决方案2】：

你的

<option [value]="option.value">

您的 selectedTimeOption 可以设置为：

selectedTimeOption = '1'

【讨论】：

感谢您的回复。我已经编辑了这个问题，我试图在选择而不是下拉选项中显示一个值。希望我现在已经正确传达了！
要在
是的，我正在检查与
你能在你的问题中添加一些示例标签及其值吗？
编辑了问题。请看一看。

【解决方案3】：

您需要遵循语法问题和编码约定。请在遍历数组时重命名这些选项变量，如下所示。

例如：*ngFor = "让时间源的时间"

这里是堆栈闪电战example

【讨论】：

感谢您的示例。 selectedTimeOption 自动显示 select 中的第一个数组元素？是因为角度 10 吗？
不是因为Angular10，下拉框取第一个值作为默认值