如何在角度洗掉專案后更新過濾后的陣列

我正在嘗試從過濾串列中洗掉一個專案，但它沒有得到更新。

我可以在不過濾的情況下洗掉專案。

網頁格式

<div class="search-hero">
      <input
        class="form-control"
        type="text"
        name="search"
        [(ngModel)]="searchText"
        autocomplete="off"
        placeholder="&#61442;  Start searching for a hero by id or name or country"
      />
    </div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Hero Name</th>
          <th>Country</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let hero of heroes | filter: searchText; let index = index">
          <td>{{ hero.id }}</td>
          <td>{{ hero.name }}</td>
          <td>{{ hero.country }}</td>
          <td (click)="onDelete(index)"><button>Delete</button></td>
        </tr>
      </tbody>
    </table>

檔案：

searchText;
  heroes = [
    { id: 11, name: 'Mr. Nice', country: 'India' },
    { id: 12, name: 'Narco', country: 'USA' },
    { id: 13, name: 'Bombasto', country: 'UK' },
    { id: 14, name: 'Celeritas', country: 'Canada' },
    { id: 15, name: 'Magneta', country: 'Russia' },
    { id: 16, name: 'RubberMan', country: 'China' },
    { id: 17, name: 'Dynama', country: 'Germany' },
    { id: 18, name: 'Dr IQ', country: 'Hong Kong' },
    { id: 19, name: 'Magma', country: 'South Africa' },
    { id: 20, name: 'Tornado', country: 'Sri Lanka' },
  ];

  onDelete(index) {
    this.heroes.splice(index, 1);
    console.log('deleted');
  }

僅當在搜索欄中搜索某些內容時，UI 才會更新。

這是可重現的示例鏈接

謝謝！

uj5u.com熱心網友回復：

英雄串列中的英雄是用 unique 標識的id，可以嘗試通過 unique 洗掉id。

<div class="container text-center">
  <h1>{{ title }}</h1>
</div>
<div class="container">
  <div class="row">
    <div class="search-hero">
      <input
        class="form-control"
        type="text"
        name="search"
        [(ngModel)]="searchText"
        autocomplete="off"
        placeholder="&#61442;  Start searching for a hero by id or name or country"
      />
    </div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Hero Name</th>
          <th>Country</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let hero of heroes | filter: searchText; let index = index">
          <td>{{ hero.id }}</td>
          <td>{{ hero.name }}</td>
          <td>{{ hero.country }}</td>
          <td (click)="onDelete(hero.id)"><button>Delete</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'Angular Search Using ng2-search-filter';
  searchText;
  heroes = [
    { id: 11, name: 'Mr. Nice', country: 'India' },
    { id: 12, name: 'Narco', country: 'USA' },
    { id: 13, name: 'Bombasto', country: 'UK' },
    { id: 14, name: 'Celeritas', country: 'Canada' },
    { id: 15, name: 'Magneta', country: 'Russia' },
    { id: 16, name: 'RubberMan', country: 'China' },
    { id: 17, name: 'Dynama', country: 'Germany' },
    { id: 18, name: 'Dr IQ', country: 'Hong Kong' },
    { id: 19, name: 'Magma', country: 'South Africa' },
    { id: 20, name: 'Tornado', country: 'Sri Lanka' },
  ];

  onDelete(heroId: number) {
    console.log(heroId);
    this.heroes = this.heroes.filter((hero) => hero.id !== heroId);
    console.log('deleted');
  }
}

這里的例子

uj5u.com熱心網友回復：

問題是您使用當前索引作為洗掉專案的引數。如果您過濾“德國”并嘗試洗掉該物件，則該物件的索引將變為0，您將從串列 ( ) 中6洗掉第一項。{ id: 11, name: 'Mr. Nice', country: 'India' }更好的方法是使用id來確保從陣列中洗掉正確的物件：

<tr *ngFor="let hero of heroes | filter: searchText">
    <td>{{ hero.id }}</td>
    <td>{{ hero.name }}</td>
    <td>{{ hero.country }}</td>
    <td (click)="onDelete(hero.id)"><button>Delete</button></td>
</tr>

方法：

onDelete(id) {
    this.heroes.splice(this.heroes.findIndex(h => h.id === id));
}

uj5u.com熱心網友回復：

角度變化檢測通過參考作業。通過使用splice在您的陣列上使用，不會修改原始參考（記憶體地址）。

您最好執行以下操作：

onDelete(id: number) {
  this.heroes = this.heroes.filter(hero => hero.id !== id);
}

這將觸發變化檢測。

除此之外，您可以 trackBy向您添加一個函式，*ngFor這樣當只有一個專案發生變化時，陣列的 dom 不會被完全重寫。

uj5u.com熱心網友回復：

我調查了這個問題，發現每當您過濾資料時，它都會顯示第一個索引上的資料，當您單擊洗掉按鈕時，它總是會洗掉 0 索引上的值，因為搜索到的值顯示在索引 0 上。

解決方案是你必須在點擊 onDelete() 函式時傳遞 hero.id 并在引數中傳遞 id 而不是索引：

 <tbody>
    <tr *ngFor="let hero of heroes | filter: searchText; let index = index">
      <td>{{ hero.id }}</td>
      <td>{{ hero.name }}</td>
      <td>{{ hero.country }}</td>
      <td (click)="onDelete(hero.id)"><button>Delete</button></td>
    </tr>
  </tbody>

然后在 ts 檔案中獲取基于 id 的索引：

onDelete(id) {
let index = this.heroes.findIndex((x) => x.id == id);
this.heroes.splice(index, 1);
console.log('deleted');

}

它將解決問題。

標籤：有角度的

上一篇：Angular：迭代i18njson中的物件

下一篇：在沒有NgbModule的情況下通過javascript在角度(.ts)中使用boostrap模態？