ngIf 在 ngfor 中验证 for 循环的每一项

Question

<li *ngFor="let year of paper?.years" class="list-group-item">                                                
                    <div>
                        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
                        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>
                    <div> 
                        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
                        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>   
</li>

以上代码运行良好。但我想检查每个 fileId，是否为空。如果为 null，则不会生成链接，反之亦然。

我设置了*ngIf，下面是代码示例。但是它不起作用。

<li *ngFor="let year1 of paper?.years" class="list-group-item">  

                    <div *ngif="year.questionPaper.fileId != ''">
                        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
                        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>
                    <div *ngif="year.markScheme.fileId != ''"> 
                        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
                        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>                      

                </li>

我尝试了其他几种方法，但没有任何效果。像：定义 ng-模板。

Answer 1

你打错了。使用 *ngIf

<div *ngIf="year.questionPaper.fileId != ''">
                        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
                        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>
                    <div *ngIf="year.markScheme.fileId = ''"> 
                        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
                        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
                    </div>

Answer 2

Syedur 答案的扩展，

*ngIf="year.markScheme.fileId = ''" 在上一行中，您错过了 == 或 ===，但没有错过 =。可以是 =

Answer 3

无需使用 == 或 !=。

只需使用以下代码修改您的代码即可。

<li *ngFor="let year1 of paper?.years" class="list-group-item">      
     <div *ngIf="year.questionPaper.fileId">
        <a routerLink="/viewpdf/{{year.questionPaper.fileId}}">Question Paper - {{year.formattedYear }}</a> 
        <a href="{{ downloadUrl }}/{{year.questionPaper.fileId}}" class="fa fa-download" aria-hidden="true"></a>
     </div>
     <div *ngIf="year.markScheme.fileId"> 
        <a routerLink="/viewpdf/{{year.markScheme.fileId}}"> || Mark Scheme - {{year.formattedYear }}</a>                        
        <a href="{{ downloadUrl }}/{{year.markScheme.fileId}}" class="fa fa-download" aria-hidden="true"></a>
    </div>                        
</li>

解释：

<div *ngIf="year.questionPaper.fileId"> // 这将自动检查 null、未定义和空字符串.

Answer 4

Surjeet Bhadauriyas 的回答让我找到了解决问题的正确途径。我仍然想用以下错误引用这个问题："无法读取属性未定义的名称"，因为搜索这个错误给我带来的主要是异步数据问题，这不是:

数组的数据点比字典多，我想在数组上迭代 (ngFor) 并在没有数据点时访问除 (ngIf) 之外的字典。

组件

letters: string[] = ["A", "B", "C"];
dictionary: { [key: string]: { name: string } } = {};

ngOnInit() {
    this.dictionary["A"] = { name: "Alpha" };
    this.dictionary["B"] = { name: "Beta" };
}

模板（不起作用）

<ng-container *ngFor="let letter of letters">
    <ng-container *ngIf="letter!=C">
        <pre>{{letter}}</pre>
        <pre>{{dictionary[letter].name}}</pre>
    </ng-container>
</ng-container>

模板（有效）

<ng-container *ngFor="let letter of letters">
    <ng-container *ngIf="dictionary[letter]">
        <pre>{{letter}}</pre>
        <pre>{{dictionary[letter].name}}</pre>
    </ng-container>
</ng-container>

ngIf 在 ngfor 中验证 for 循环的每一项

ngIf inside ngfor to validate each item of the for loop

angular-ng-if

ngfor

angular

*ngIf 在 *ngfor 中验证 for 循环的每一项

*ngIf inside *ngfor to validate each item of the for loop

angular-ng-if

ngfor

angular

ngIf 在 ngfor 中验证 for 循环的每一项

ngIf inside ngfor to validate each item of the for loop