*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-template。

Answer 1

无需使用 == 或 !=。

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

<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、未定义和空字符串。