如何使用 Angular 中的模板引用为输入文本字段赋值 8

Question

I have drop down change event, during the change event I need populate some value to the respective text field.

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>

app.component.ts

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

During the change event editAge I need to update the respective row text field. How to get the dynamic input template and update it?

Example

Answer 1

Since you need to change input of each column of the row. it is better to handle it via models instead of html element reference.

<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;
  }

checkout this demo https://stackblitz.com/edit/angular-styrlp and let me know if it resolves.

updated (dynamic text field)

@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);
  }

Here is the demo - https://stackblitz.com/edit/angular-g3tzmh

Answer 2

Use multiple ViewChild to identify the inputs. And, then use the second argument to editAge() to know which input field needs to be rendered/updated.

Because initially, the input fields are not part of the DOM, we use setTimeout() to let the DOM be updated first, so that by the time we try to set the value of the corresponding input field, it will be available in the 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>

app.component.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);
  }
}