Question

嗨，我有这段代码：

<div>
    <div *ngIf="!showInfo">
      <div >
          <br>    
<table style="border: 0px; display: table; margin-right: auto; margin-left: auto; width: 155%;">
                <tbody>
                  <tr>
                    <th style="color: black;border: 0px;">Type</th>
                    <th style="color: black;border: 0px;">Radius</th>
                    <th style="color: black;border: 0px;">Number</th>
                  </tr>
                  <br>
                  <tr *ngFor="let row of groups;let i = index">
                    <td style=" border: 0px;" >
                      <input #focus matInput type='text' style=" border: 0px;"  type="text" value="{{row.type}}" readonly  [(ngModel)]="row.type" >
                    </td>
                    <td>
                      <select (change)="changeRadius($event, i)" attr.id="{{row.id}}" [value]="5000">
                        <option *ngFor="let meters of radius"  [value]="meters.value">{{meters.value}}</option>
                      </select>
                    </td>
                    <td style="margin-left: 60px; border: 0px;">
                      <input  matInput type='text' style="margin-left: 30px; border: 0px;" readonly  type="text" value="{{row.number}}" [(ngModel)]="row.number">
                    </td>
                  </tr>
                </tbody>
              </table>
            <hr style="color: darkred;" >

            <div>
              <button mat-button class="custom-button" (click)="getNewRadius()">
                  OK
              </button>

该表第一次出现时，我希望每个选择都具有选中选项5000，因此用户为每个选择选择新半径，然后单击“确定”。在我的打字稿中，我有一个数组“ radiousToSend”，其中包含每个select的选定半径。现在，我希望该表每次出现时都具有选定的选项，即用户最后一次选择的值是“ radiousToSend” < / p>

我试图做这样的事情：

let pan = (<HTMLInputElement>document.getElementById('1'));
    pan[0].options[pan[0].options.selectedIndex].selected = true;

但是它不起作用，因为每次该表出现时，每个选择都具有选定值= 5000，但我希望只有第一次该值是静态的。

Answer 1

您可以使用带有ngModel指令的双向绑定来绑定到控制器中的变量。

模板

<select (change)="changeRadius($event, i)" attr.id="{{row.id}}" [(ngModel)]="selectOption">
  <option *ngFor="let meters of radius" [value]="meters.value">{{meters.value}}</option>
</select>

并在点击事件处理程序中设置selectOption变量的值。

控制器

export class AppComponent  {
  selectOption = 5000;   // <-- default value of all select options

  getNewRadius() {    // <-- change all options to 1000 on button click
    this.selectOption = 1000;
  }
}

使用打字稿更改动态选择的值

1 个答案: