无法让多个嵌套的 ngif 语句按预期工作

Question

我正在尝试执行多个嵌套的 ngIf 语句。这个想法是这样的：

if (error1){
   print "We cannot find your information on Platform 1"
}
else{
   print name1
   print id1
   if(error2){
      print "We cannot find your information on Platform 2"
   }
   else{
      print name2
      print id2
      if(error3){
          print "We cannot find your information on Platform 3"
       }
       else{
          print name3
          print id3
}}}

我能够通过显示错误或信息使第一个 ngif 正常工作，但是一旦我尝试合并其他 ngIf 语句，就不会显示任何内容。

我的 html 看起来像这样：

<!DOCTYPE html>
<br>
<div>
    <h2>User {{ourUser}}</h2>
</div>

<h3>Platform 1</h3>
<div *ngIf="error1; else noError1">

    <body>We cannot find your information on Platform 1</body>

    <ng-template #noError1>

        <body>
            Name: {{finalData[0].name}}
            <br> ID: {{finalData[0].userID}}
        </body>

        <div *ngIf="error2; else noError2">

            <body>We cannot find your information on Platform 2</body>

            <h3>Platform 2</h3>
            <ng-template #noError2>

                <body>
                    Name: {{finalData[1].name}}
                    <br> ID: {{finalData[1].userID}}
                </body>
                <h3>Platform 4</h3>
                <div *ngIf="error3; else noError3">

                    <body>We cannot find your information on Platform 3</body>

                    <ng-template #noError3>

                        <body>
                            Name: {{finalData[2].name}}
                            <br> ID: {{finalData[2].userID}}
                        </body>
                    </ng-template>
                </div>
            </ng-template>
        </div>
    </ng-template>
</div>

我想我已经正确关闭了所有标签，除非我遗漏了什么。

就像我之前说的，我可以让第一个语句独立运行，但是当我合并其他语句时，没有数据显示。所有显示的是

User

Platform 1
Name: 
ID:

Answer 1

问题出在 *ngIf -s 的嵌套上，所以如果您按照下面的示例更改结构，它就会起作用。

<h3>Platform 1</h3>
<div *ngIf="error1; else noError1">
    <body>We cannot find your information on Platform 1</body>
</div>

<ng-template #noError1>

<body>
Name: here is the name
  <br> 
ID: here is the id
</body>
        <div *ngIf="error2; else noError2">
            <body>We cannot find your information on Platform 2</body>
            <h3>Platform 2</h3>
        </div>
</ng-template>

<ng-template #noError2>
 <body>
   Name: second name
   <br> 
   ID: second id
 </body>
   <h3>Platform 4</h3>
   <div *ngIf="error3; else noError3">
       <body>We cannot find your information on Platform 3</body>
   </div>
</ng-template>
<ng-template #noError3>
  <body>
    Name: third name
    <br> 
    ID: third id
  </body>
</ng-template>

StackBlitz

备注

如评论中所述，您可能应该使用不同的 HTML 结构，这样看起来不会那么乱。

无法让多个嵌套的 ngif 语句按预期工作

Cannot get several nested ngif statements to work as expected

html

angular-ng-if

angular

备注