How to save statement input Angular?

问题

<tr *ngFor="let item of items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7" /></td>
</tr>

Where items in array of objects that is received from server each 5 seconds.

Problem is if fill inputs <input size="7" /> it will be replaced after next rendering. How to save the statement of these inputs?

回答1:

Angular will recreate DOM elements when items in a collection are changed and rendered via *ngFor. By default, Angular will track how items are unique by using an === comparison on the values.

Where items in array of objects that is received from server each 5 seconds.

Likely means, that the items array is a new array every 5 seconds. So each item is a new item, and *ngFor will recreate each DOM element.

You have to use a trackby to tell Angular to use the item.id as the unique identifier.

<tr *ngFor="let item of items; trackby: trackItems">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7" /></td>
</tr>

Component:

   const trackItems = (indx, item) => item.id;

回答2:

try this:

<table class="table table-sm">
    <tr *ngFor="let item of items;let index = index;trackBy:trackByIndex;">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.score}}</td>
        <td>
            <input [(ngModel)]="items[index].YourPropName">
        </td>
    </tr>
</table>

then in your component:

trackByIndex(index: number, obj: any): any {
  return index;
}

回答3:

Try like this:

<table>
  <tr *ngFor="let item of items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7" [(ngModel)]="item.value"/></td>
  </tr>
</table>

Working Demo

As per your comment, try like this:

Template:

<tr *ngFor="let item of items">
    <td>{{ item.id }}</td>
    <td>{{ item.name }}</td>
    <td>{{ item.score }}</td>
    <td><input size="7"  (change)="onChange(item.id, $event.target.value)"/></td>
</tr>

TS:

  model = [];


  onChange(id,value) {
    this.model.push({id:id,value:value})
  }

回答4:

You could use trackBy the prevent dom elemnts to being created every time ngFor is updated... you could also use another object to add the values every time you refresh your array...

Example

refreshItems(){
    // items receifved every 5 seconds..
    this.received = [
    {
      id:1,
      name: 'name: ',
      score: Math.floor(Math.random() * 6) + 1  
    },
    {
      id:2,
      name: 'name2: ',
      score: Math.floor(Math.random() * 6) + 1  
    }
    ];
    this.items = this.received.map(received => {
      return {
        ...received,
        value: this.items.find(item => item.id === received.id).value || '',
      }
    });
  }

来源：https://stackoverflow.com/questions/58590578/how-to-save-statement-input-angular

标签

angular

angular8