Как написать оператор * ngIf в таблице в Angular?

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. не является последовательным, потому что i обновляется для l oop.

2. Первый столбец слишком длинный.

Как можно писать операторы if, чтобы избежать этих проблем?

Answer 1

Некоторые элементы HTML требуют, чтобы все непосредственные дочерние элементы были определенного типа c. Например, элемент <tr> требует <td> дочерних элементов. Вы не можете заключить строки в условный <a>.

ng-контейнер на помощь

Angular <ng-container> - это группирующий элемент, который не мешает стилям или макету, потому что 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 -контейнер-спасатель

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>

В машинописном тексте: -

public filteredCheckBoxes = [];

ngOnInit() {
  this.filterData();
}

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

Answer 3

Этот ответ: { ссылка }, вызывает следующую ошибку:

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

из следующей функции:

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