Angular 11中*ngIf结构指令失效，表格内容全隐藏求助

核心问题 #

你代码里的***ngif是错误写法**，Angular的结构指令*ngIf严格区分大小写，小写的f会让Angular无法识别该指令，进而导致渲染逻辑异常，出现内容全部隐藏的问题。

修复步骤 #

将HTML中所有的*ngif替换成*ngIf，修正后的关键代码片段如下：

<tbody>
    <tr *ngFor="let user of userElement; let i = index">
      <td>{{user.isEdit}}</td>
      <td>
        <div *ngIf="!user.isEdit">
        {{user.position}}
      </div>
      <div *ngIf="user.isEdit">
        <input type="text" class="form-control" name="position" [(ngModel)]="user.position" />
      </div>
      </td> 
      <td>
        <div *ngIf="!user.isEdit">
          {{user.name}}
        </div>
        <div *ngIf="user.isEdit">
          <input type="text" class="form-control" name="name" [(ngModel)]="user.name"/>
        </div>
      </td> 
      <td>
        <div *ngIf="!user.isEdit">
          {{user.Weight}}
        </div>
        <div *ngIf="user.isEdit">
          <input type="text" class="form-control" name="Weight" [(ngModel)]="user.Weight"/>
        </div>
      </td> 
      <td>
        <div *ngIf="!user.isEdit">
          {{user.symbol}}
        </div>
        <div *ngIf="user.isEdit">
          <input type="text" class="form-control" name="symbol" [(ngModel)]="user.symbol"/>
        </div>
      </td> 
      <td>
       <div class="row" *ngIf="!user.isEdit"> 
          <div class="col-md-6">
            <i class="fa-solid fa-pencil" (click)="isEdit(user)" ></i>
          </div>
          <div class="col-md-6">
            <i class="fa-sharp fa-solid fa-trash" (click)="delete(user)"></i>
          </div>
        </div> 
        <div class="row" *ngIf="user.isEdit">
          <div class="col-md-6">
            <i class="fa-sharp fa-solid fa-floppy-disk" (click)="save(user)"></i>
          </div>
          <div class="col-md-6">
            <i class="fa-solid fa-xmark" (click)="close(user)"></i>
          </div>
        </div>
      </td> 
    </tr>
  </tbody>

额外检查点 #

• 确认userElement数组中每个对象的isEdit初始值为布尔类型（true/false），避免因undefined或其他类型导致判断异常。
• 检查组件中的isEdit、save、close方法是否正确修改了user.isEdit的值，示例逻辑如下：

isEdit(user: any) {
  user.isEdit = true;
}

close(user: any) {
  user.isEdit = false;
}

save(user: any) {
  // 执行保存逻辑
  user.isEdit = false;
}

内容的提问来源于stack exchange，提问作者Bhushan Khaladkar