Angular 8 重置 ngFor 中的 Select 选项

Question

下面是创建 Select 控件的代码。

 <select class="form-control" #tempSelect (change)="priorityChangedChk($event,wt)" style="width:160px">
          <option value="0">Select a Priority</option>
          <option *ngFor="let wto of wtpFrmDB; let j=index" [ngValue]="wto">
            {{j + 1}}
          </option>
        </select>

这就是 Select 的创建方式

现在，如果我在其中一个 select 中创建一个 selection，我会执行验证，如果验证失败，我只需要重置当前的 SELECT 即我需要再次将其设置为 "Select a Priority".

Answer 1

将 select 与 [(ngModel)]="selectedValue"

绑定

<select class="form-control" [(ngModel)]="selectedValue" #tempSelect (change)="priorityChangedChk($event,wt)" style="width:160px">
          <option value="0">Select a Priority</option>
          <option *ngFor="let wto of wtpFrmDB; let j=index" [ngValue]="wto">
            {{j + 1}}
          </option>
        </select>

当验证失败时设置

this.selectedValue = 0

希望这能奏效

Answer 2

这是我使用的代码。它可能有帮助也可能没有帮助，因为我没有使用 form-control:

    <select id="componentSelect"
        (change)="addNewComponent($event.target.value)">
        <option *ngFor="let option of options">{{option}}</option>
    </select>

打字稿：

addNewComponent(name: string) {
  //do something
  changeSelectedOption('componentSelect', 'Select a Priority');
}

javascript:

function changeSelectedOption(id, value) {
  var e = document.getElementById(id);
  if (e)
    e.value = value;
}

Answer 3

在方法中传递select控件：

<select class="form-control" #tempSelect (change)="priorityChangedChk(tempSelect, $event,wt)" style="width:160px">
          <option value="0">Select a Priority</option>
          <option *ngFor="let wto of wtpFrmDB; let j=index" [ngValue]="wto">
            {{j + 1}}
          </option>
</select>

并重置值：

priorityChangedChk(c, e, wt) {
  // Your logic
  if (true) {
    c.value = "0";
  }
}

如何禁用？

c.disabled = true;

如何获取价值？

c.value

记住 c 是您的原生元素。您可以应用 JS 中可用的任何内容来操作控件。

Angular 8 重置 ngFor 中的 Select 选项

Angular 8 Reset Select option inside ngFor

angular

angular8