如何使用 angular 中的復選框在表格中顯示/隱藏某些字段（例如：status=false）？

Question

我正在嘗試顯示和隱藏表中具有status= false的所有字段。 當我選中復選框時，應顯示包括 status=false 在內的所有記錄。 當我取消選中該復選框時，它應該隱藏所有 status=false 的記錄。 有人可以幫我怎么做。

https://stackblitz.com/edit/call-http-request-in-angular-6-pffwgg?file=src%2Fapp%2Fapp.component.ts

Answer 1

我能想到很多方法。

第一步是在界面中實際定義要過濾的屬性：

interface Kafein {
  name: string;
  address: string;
  completed: string;
}

這將允許您訪問 your.ts 和 .html 文件中的屬性，這在任何一種情況下都是很好的做法。

第二步是從復選框中讀取事件值，以便您可以進行主動過濾。 您可以通過將事件傳遞給 typescript 代碼來做到這一點，如下所示：

<input type="checkbox" (click)="showIncative($event)">

...或定義一個ViewChild並在每次調用時讀取 function 中的值，但我個人更喜歡傳遞事件。

優點：表的數據會發生變化，導致綁定觸發，視圖更新。

或者，您可以將復選框的值直接綁定到公共實例變量。

<input type="checkbox" value="displayInactiveItems">

缺點：綁定不會被觸發，也就是說你必須調用一些function來觸發HTML的更新。

工作示例：

HTML：

<p>Http Request</p>
<div>
  <input type="checkbox" (click)="showIncative($event)">
  <label>show inactive/false</label>
</div>
<table width="100%" class="my-table">
  <thead class="my-table headers">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>User Id</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody class="my-table body">
    <tr *ngFor="let datas of filterInactive(httpData)">
      <td>{{datas.id}}</td>
      <td style="padding-left:50px">{{datas.title}}</td>
      <td>{{datas.userId}}</td>
      <td>{{datas.completed}}</td>
    </tr>
  </tbody>
</table>

export class AppComponent {
  name = 'Angular 6';
  constructor(private http: HttpClient) {}
  url = 'https://jsonplaceholder.typicode.com/todos';

  displayData: Kafein[] = [];

  private displayInactive: boolean = false;

  public showIncative(event: {target: {checked: boolean}}) {
    this.displayInactive = event.target.checked;
  }

  ngOnInit() {
    this.http.get<Kafein[]>(this.url).subscribe(data => {
      this.displayData = data;
    });
  }

  public filterInactive(items: Kafein[] = this.displayData) {
    return this.displayInactive
      ? items
      : items.filter(item => /true/i.test(item.completed));
  }
}

另一種方法是將請求中的數據綁定到一個變量，並將您實際顯示的數據綁定到另一個變量（我剛剛看到了交叉帖子）：

Typescript：

  requestData: Kafein[] = [];
  displayData: Kafein[] = [];

  public showIncative(event?) {
    if (event && event.target.checked) {
      this.displayData = this.requestData; 
    } else {
      this.displayData = this.requestData.filter(item => /true/i.test(item.completed));
    }
  }

  ngOnInit() {
    this.http.get<Kafein[]>(this.url).subscribe(data => {
      this.requestData = data;
      this.showIncative();
    });
  }

有很多方法可以給那只特定的貓剝皮！

Answer 2

嗨，我對你app.component.ts做了一些修改，請參閱下文
app.component.ts

export class AppComponent {
  name = 'Angular 6';
  constructor(private http: HttpClient) {}
  url = 'https://jsonplaceholder.typicode.com/todos';
  httpData: any;
  // different display variable created
  displayData: any;

  ngOnInit() {
    this.http.get<Kafein[]>(this.url).subscribe(data => {
      this.httpData = data;
      // keeping a local copy of response
      this.displayData = JSON.parse(JSON.stringify(this.httpData));
    });
  }
  showIncative(value) {
    // based on checked/unchecked flag you can filter data
    this.displayData = JSON.parse(JSON.stringify(this.httpData.filter(f => f.completed == value.currentTarget.checked)));
  }
}  

並在app.component.html
app.component.html

<p>Http Request</p>
<div>
  <input type="checkbox" (change)="showIncative($event)">
  <label>show inactive/false</label>
</div>
<table width="100%" class="my-table">
  <thead class="my-table headers">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>User Id</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody class="my-table body">
    <tr *ngFor="let datas of displayData">
      <td>{{datas.id}}</td>
      <td style="padding-left:50px">{{datas.title}}</td>
      <td>{{datas.userId}}</td>
      <td>{{datas.completed}}</td>
    </tr>
  </tbody>
</table>  

工作堆棧閃電戰

Answer 3

最簡單的方法是使用 function 來返回過濾后的數據。 性能會略有降低，但有很多方法可以緩解這種情況。 我更新了你的 stackblitz： https://stackblitz.com/edit/call-http-request-in-angular-6-gw57i8?file=src/app/app.component.ts

<tr *ngFor="let datas of displayData()">

我將復選框中的選中值設置為 boolean (onlyActive)，因此可用於過濾。

displayData(): any[] {
    return this.httpData?.filter(x => x.completed !== this.onlyActive )
  }