更新到 Angular 13 后的属性绑定错误答案

【问题标题】：Property binding error after updating to Angular 13更新到 Angular 13 后的属性绑定错误
【发布时间】：2022-01-16 04:09:04
【问题描述】：

我收到了这个错误

属性绑定 ngIf 未被嵌入模板上的任何指令使用。确保属性名称拼写正确，并且所有指令都列在“@NgModule.declarations”中

即使你在我运行ng serve 时它也能正常工作。

当我将 angular 更新为 v13 时，我开始收到此编译错误。

我已经尝试重新启动 Vscode 并重新安装 Angular 语言服务 并安装以前版本的 Angular 语言服务...它们都不起作用..

我的app.module.ts：

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [CommonModule, BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
  exports: [CommonModule, BrowserModule],
})
export class AppModule {}

【问题讨论】：

你能发布完整的错误信息吗？
@ShashikamalRC 这是我发布的唯一错误消息
我遇到了同样的问题，但没有解决办法

标签： angular angular13 angular-language-service

【解决方案1】：

来自Github，禁用Use legacy View Engine language service 可以解决问题。

进入Angular Language Service的扩展设置并取消选中Use legacy View Engine language service。

【讨论】：

谷歌这个答案并找到答案并不容易。竖起大拇指！

【解决方案2】：

前段时间我自己也遇到过这个错误。

我在网上搜索了它，根据this issue，这是运行ngcc后intellisense或indexing的问题，与您的代码无关.您可以通过删除node_modules 和package-lock.json 并运行npm i 来验证我的声明。您会看到错误会消失，但是当您运行run serve 或ng build 时，它会再次弹出。无论如何，您的代码将按原样编译和运行，没有问题，但在 Angular 团队解决此问题之前，您会看到该错误。

作为一种解决方法，您可以将其包装在 <ng-container> 中，（在某些情况下）它会修复错误，但我自己没有这样做。我正在等待错误修复补丁。

【讨论】：

【解决方案3】：

试试这个。

IN .ts 文件：

export class Helloworld implements OnInit {
  valid: boolean = false;

   ngOnInit(){
     this.valid = true;
   }

}

在 HTML 中

<div *ngIf="valid"> Hello World</div>

这里使用 Angular 中的结构绑定将能够识别您的“有效”属性。

【讨论】：