如何使用 Angular 中的模板引用為輸入文本字段賦值 8

Question

我有下拉更改事件，在更改事件期間我需要將一些值填充到相應的文本字段。

app.component.html

<tr>
  <td>John</td>
  <td>
    <select (change)="editAge(selectField1.value, 1)" #selectField1>
      <option value="1">Less than 10</option>
      <option value="2">Greater than 10 and Less than 80</option>
      <option value="3">Less than 80</option>
    </select>
  </td>
  <td>
    <span *ngIf="!(selectField1.value == 2)">24</span>
    <span *ngIf="selectField1.value == 2">
      <input type="text" #textField1/>
    </span>
  </td>
</tr>
<tr>
  <td>Jacky</td>
  <td>
    <select (change)="editAge(selectField2.value, 2)" #selectField2>
      <option value="1">Less than 10</option>
      <option value="2">Greater than 10 and Less than 80</option>
      <option value="3">Less than 80</option>
    </select>
  </td>
  <td>
    <span *ngIf="!(selectField2.value == 2)">4</span>
    <span *ngIf="selectField2.value == 2">
      <input type="text" #textField2 />
    </span>
  </td>
</tr>

應用程序組件.ts

  expression = false;
  nameBind: string;
  @ViewChild('textField') nameInputRef: ElementRef;
  editAge(ee, i) {
    this.nameInputRef.nativeElement.value = 'Apple';
  }

在更改事件editAge期間，我需要更新相應的行文本字段。 如何獲取動態輸入模板並更新它？

例子

Answer 1

由於您需要更改行的每一列的輸入。 最好通過模型而不是 html 元素引用來處理它。

<table border="1">
  <tr><td>Name</td><td>Age</td><td>New Age</td></tr>
  <tr *ngFor="let cust of data; let j = index;"><td>{{cust.name}}</td><td>
    <select (change)="editAge(cust.age, j)" 
    [(ngModel)]="cust.age"
    #selectField1>
    <option [value]="i+1" *ngFor="let age of dropdownList; let i = index;">{{age.label}}</option>
  </select></td><td> <span  *ngIf="!(selectField1.value == 2)">{{cust.newAge}}</span> <span *ngIf="selectField1.value == 2"><input type="text" [(ngModel)]="cust.newAge" #textField/></span></td></tr>
</table>

---

dropdownList: any = [
    { label: 'Less than 10', newAge: '' },
    { label: 'Greater than 10 and Less than 80', newAge: 'Apple' },
    { label: 'Less than 80', newAge: 'Banana' }
  ];

  data: any = [
    { name: 'John', age: '1', newAge: '24' },
    { name: 'Jacky', age: '1', newAge: '4' },
    { name: 'Roy', age: '1', newAge: '34' }
  ]
  editAge(ee, i) {
    this.data[i].newAge = this.dropdownList[ee-1].newAge;
  }

查看此演示https://stackblitz.com/edit/angular-styrlp並讓我知道它是否已解決。

更新（動態文本字段）

@ViewChild('textField1', { static: false }) nameInputRef1: ElementRef;
  @ViewChild('textField2', { static: false }) nameInputRef2: ElementRef;
  @ViewChild('textField3', { static: false }) nameInputRef3: ElementRef;

editAge(ee, i) {
    let elementRef = `nameInputRef${i}`;
    setTimeout(() => {
        console.log(this);

        if (this[elementRef])
        this[elementRef].nativeElement.value = 'Apple';
    }, 100);
  }

這是演示 - https://stackblitz.com/edit/angular-g3tzmh

Answer 2

使用多個 ViewChild 來識別輸入。 並且，然后使用 editAge() 的第二個參數來了解需要呈現/更新哪個輸入字段。

因為最初，輸入字段不是 DOM 的一部分，所以我們使用 setTimeout() 讓 DOM 先更新，這樣當我們嘗試設置相應輸入字段的值時，它就會在 DOM 中可用.

app.component.html

<table>
  <tbody>
    <tr>
      <td>John</td>
      <td>
        <select (change)="editAge(selectField1.value, 1)" #selectField1>
          <option value="1">Less than 10</option>
          <option value="2">Greater than 10 and Less than 80</option>
          <option value="3">Less than 80</option>
        </select>
      </td>
      <td>
        <span *ngIf="!(+selectField1.value == 2)">24</span>
        <span *ngIf="+selectField1.value == 2">
          <input type="text" #textField1 />
        </span>
      </td>
    </tr>
    <tr>
      <td>Jacky</td>
      <td>
        <select (change)="editAge(selectField2.value, 2)" #selectField2>
          <option value="1">Less than 10</option>
          <option value="2">Greater than 10 and Less than 80</option>
          <option value="3">Less than 80</option>
        </select>
      </td>
      <td>
        <span *ngIf="!(+selectField2.value == 2)">4</span>
        <span *ngIf="+selectField2.value == 2">
          <input type="text" #textField2 />
        </span>
      </td>
    </tr>
  </tbody>
</table>

應用程序組件.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  @ViewChild('textField1') nameInputRef1: ElementRef;
  @ViewChild('textField2') nameInputRef2: ElementRef;
  editAge(ee, i) {
    if (+ee !== 2) return;
    setTimeout(() => {
      if (+i === 1) this.nameInputRef1.nativeElement.value = 'Apple';
      else this.nameInputRef2.nativeElement.value = 'Orange';
    }, 500);
  }
}