如何在Angular的表中寫*ngIf語句？

Question

<table border = 2 border-bottom = 2>
    <th> </th>
    <th>S. No.</th>
    <th>Title</th>
    <th>Creation date</th>
    <th>Modification date</th>

    <tr *ngFor = "let checkboxesBlog of getCheckboxes_FormGroup.controls; let i = index;" >
        <a *ngIf = "checkboxesBlog.controls.visible.value === true">
            <td [formGroup] = "checkboxesBlog"> 
                <input type      = "checkbox"
                 formControlName = "checkboxValue"
                 (click)         = "onCheckboxClicked( i )">
            </td>

            <td>{{ i + 1 }}</td>
            <td>{{ checkboxesBlog.controls.blogTitle.value }}</td>
            <td>{{ checkboxesBlog.controls.creationDate.value }}</td>
            <td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
        </a>
    </tr>
</table>

在 if 子句之后會產生上述兩個問題：
<a *ngIf = "checkboxesBlog.controls.visible.value === true">

1. S.R. No. S.R. No. ，不是順序的，因為 i 在 for 循環中得到更新。

2. 第一列不必要地太長。

怎樣寫 if 語句來避免這些問題？

Answer 1

一些 HTML 元素要求所有直接子元素都是特定類型。 例如， <tr>元素需要<td>子元素。 您不能將行包裝在有條件的<a>中。

ng-container 救援

Angular <ng-container>是一個不會干擾 styles 或布局的分組元素，因為 Angular 沒有將其放入 DOM 中。

這是條件行，這次使用<ng-container> 。

<table border = 2 border-bottom = 2>
    <th> </th>
    <th>S. No.</th>
    <th>Title</th>
    <th>Creation date</th>
    <th>Modification date</th>

    <tr *ngFor = "let checkboxesBlog of getCheckboxes_FormGroup.controls; let i = index;" >
        <ng-container *ngIf = "checkboxesBlog.controls.visible.value === true">
            <td [formGroup] = "checkboxesBlog"> 
                <input type      = "checkbox"
                 formControlName = "checkboxValue"
                 (click)         = "onCheckboxClicked( i )">
            </td>

            <td>{{ i + 1 }}</td>
            <td>{{ checkboxesBlog.controls.blogTitle.value }}</td>
            <td>{{ checkboxesBlog.controls.creationDate.value }}</td>
            <td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
        </ng-container>
    </tr>
</table>

更多信息： https://angular.io/guide/structural-directives#ng-container-to-the-rescue

Answer 2

這里是 go：-

<table border = 2 border-bottom = 2>
    <tr>
    <th> </th>
    <th>S. No.</th>
    <th>Title</th>
    <th>Creation date</th>
    <th>Modification date</th>
    </tr>
    <tr *ngFor = "let checkboxesBlog of filteredCheckBoxes; let i = index;" >
        <a>
            <td [formGroup] = "checkboxesBlog"> 
                <input type      = "checkbox"
                 formControlName = "checkboxValue"
                 (click)         = "onCheckboxClicked( i )">
            </td>

            <td>{{ i + 1 }}</td>
            <td>{{ checkboxesBlog.controls.blogTitle.value }}</td>
            <td>{{ checkboxesBlog.controls.creationDate.value }}</td>
            <td>{{ checkboxesBlog.controls.modificationDate.value }}</td>
        </a>
    </tr>
</table>

在 Typescript 中：-

public filteredCheckBoxes = [];

ngOnInit() {
  this.filterData();
}

public filterData() {
  this.filteredCheckBoxes = this.getCheckboxes_FormGroup.controls.filter((data) => data.controls.visible.value);
}

Answer 3

這個答案： https://stackoverflow.com/a/62014605/462608 ，引發以下錯誤：

Property 'controls' does not exist on type 'AbstractControl'.

來自以下 function：

public filterData() {
  this.filteredCheckBoxes = this.getCheckboxes_FormGroup.controls.filter((data) => data.controls.visible.value);
}

解決該錯誤的方法是使用data.get('visible').value而不是data.controls.visible.value ，如下所示：

this.filteredCheckBoxes = this.getCheckboxes_FormGroup.controls.filter( (data) => data.get('visible').value) );