导航栏中的 ngif 问题

Question

早上好，我正在开发 Angular 项目，其中导航按钮存储在 firestore 集合中。

这是我的html：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <a mat-button class="companyName" routerLink="/">
            <span>
                <img src="../../../assets/images/nav/synergielogo.jpg"> 
            </span>
        </a>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="dossiers" *ngFor="let d of ongletservice.dossiers">
                <button mat-raised-button [matMenuTriggerFor]="menu1"> 
                    {{d.titre}}
                </button>
            </ul>
            <ul *ngFor="let s of ongletservice.solo">
                <button id='btn-1' 
                    mat-raised-button routerLink="/{{s.lien}}">
                    {{s.titre}}
                </button>
            </ul>
        </div>
        <div class='menu'>
            <mat-menu #menu1="matMenu">
                <div *ngFor="let d of ongletservice.dossiers" class='menu'>
                    <div *ngFor="let dd of ongletservice.dropdowns">
                        <div> 
                            <button *ngIf="dd.dossier===d.titre" 
                                id='btn-2' mat-button 
                                routerLink="../../{{dd.lien}}">
                              {{dd.titre}}
                            </button>
                        </div>
                    </div>
                </div>
            </mat-menu>
        </div>
    </div>
</nav>

由于某种原因，mat-menu 中的 ngIf 不起作用，因此如果我有多个下拉按钮，它将获取一个下拉列表中的所有按钮，而不仅仅是链接到它的按钮.

其余的一切正常。

我做错了什么？感谢阅读。

Answer 1

你需要使用<ng-container/>并避免嵌套ngFor：

<mat-menu #menu1="matMenu">
   <ng-container *ngFor="let o of ongletservice" class='menu'>
       <div> 
          <button *ngIf="o.dropdowns.dossier===o.dossiers.titre" 
                   id='btn-2' mat-button 
                   routerLink="../../{{o.dropdowns.lien}}">
                   {{o.dropdowns.titre}}
          </button>
       </div>     
   </ng-container>
</mat-menu>