Question

我在角度很新，我试图从基本学习角5。我刚刚尝试了ngIf指令，我发现如果part没有任何问题，但是当我使用else part时，如下面的代码那样，错误说明不是已知元素。我认为其他部分有问题。帮助我。

现在我编辑了报价，它仍然发送相同的错误。有什么我想念的东西。我对角度很新。

    import { Component, OnInit } from '@angular/core';

    @Component({
      selector: 'app-test',
      template: `
        <h2 *ngIf = "isVisible; else elseBlock" >
            This is visible
        </h2>
        <ng-template #elseBlock>
          <h2>
              This is not visible.
          </h2>
        </ng-template>
      ` ,
      styles: []
    })

    export class TestComponent implements OnInit {
      public name = "Dipesh";
      public isVisible = true;
      constructor() { }
      ngOnInit() {
      }
    }

Answer 1

*ngIf = "isVisible"; else elseBlock

应该是

*ngIf = "isVisible; else elseBlock"

你的结尾"在错误的地方过早地结束了*ngIf。

Answer 2

我认为问题是缺少引用

 @Component({

  selector: 'my-app',
  template: `
    <div>
        <h2 *ngIf="isVisible; else elseBlock">
            This is visible
        </h2>
        <ng-template #elseBlock>
          <h2>
              This is not visible.
          </h2>
        </ng-template>
    </div>
  `,
})
export class App {
  name:string;
  isVisible:boolean;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
    this.isVisible=true;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

Answer 3

查看angular.io docs中的示例：https://angular.io/api/common/NgIf

@Component({
  selector: 'ng-if-else',
  template: `
    <button (click)="show = !show">{{show ? 'hide' : 'show'}}</button>
    show = {{show}}
    <br>
    <div *ngIf="show; else elseBlock">Text to show</div>
    <ng-template #elseBlock>Alternate text while primary text is hidden</ng-template>
`
})
class NgIfElse {
  show: boolean = true;
}

就像@Joe Clay说的那样，你必须将你的其他内容放在引号内。

如何在角度5中修复以下ngIf指令？

3 个答案: