Angular中使用*ngIf else报错TS2339：属性'elseblock'不存在

我在Angular中尝试实现*If Else逻辑，HTML代码如下：

<form [formGroup]="searchForm">
    <input formControlName="search"  placeholder="search show"/>
</form>
<div *ngIf="searchForm.value.search; else elseblock">
    search 
</div> 

<ng-template #elseblock>
   Listing
</ng-template>

但TypeScript抛出如下错误：

error TS2339: Property 'elseblock' does not exist on type 'ShowListComponent'.

以下是对应的组件TS代码：

import { OnInit } from '@angular/core';
import { ShowsService } from './path-to-shows-service'; // 替换为实际服务路径
import { Router } from '@angular/router';
import { FormBuilder, FormGroup } from '@angular/forms';

export class ShowListComponent implements OnInit{
  searchForm: FormGroup;
  showsList: any = [];

  constructor(
    private showsService: ShowsService,
    private router : Router,
    private formBuilder: FormBuilder
  ) {
    this.searchForm = this.formBuilder.group({
      search: '',
    });
  }

  ngOnInit(): void {
    this.showsService.getShowsList()
      .subscribe(response => {
        this.showsList = response;
    })
  }

  goToShowDetail(show: any) {
    let title:string = show.name.replaceAll(' ','-').toLowerCase()
    this.router.navigate([this.router.url, show.id, title])
  }
}

解决方法 #

方法1：声明模板引用变量（推荐，符合严格模式规范）

在组件类中导入ViewChild和TemplateRef，显式声明模板引用变量：

import { OnInit, ViewChild, TemplateRef } from '@angular/core';
// ...其他导入代码

export class ShowListComponent implements OnInit{
  @ViewChild('elseblock') elseblock!: TemplateRef<any>; // 添加此行
  searchForm: FormGroup;
  showsList: any = [];

  // ...剩余组件代码不变
}

添加后TypeScript就能识别模板中的#elseblock变量，错误会自动消除。

方法2：调整模板写法，无需引用变量

如果逻辑简单，可直接用两个反向条件的*ngIf替代else语法，避免模板引用：

<form [formGroup]="searchForm">
    <input formControlName="search"  placeholder="search show"/>
</form>
<div *ngIf="searchForm.value.search">
    search 
</div> 
<div *ngIf="!searchForm.value.search">
   Listing
</div>

方法3：关闭严格模板检查（不推荐）

在项目根目录的tsconfig.json中，将strictTemplates设置为false：

{
  "angularCompilerOptions": {
    "strictTemplates": false
  }
}

此方法会关闭模板类型校验，可能掩盖其他潜在问题，仅适合临时测试场景。

错误原因 #

Angular严格模板检查模式下，模板中的引用变量会被TypeScript校验，要求组件类中存在对应声明，以此保证模板与组件的类型一致性。未声明时就会抛出TS2339错误。

内容的提问来源于stack exchange，提问作者gael swinne