属性更新到 Angular 13 后出现绑定错误

Question

我遇到了这个错误

Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations"

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

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

我已经尝试重新启动 Vscode 并重新安装 Angular 语言服务 并安装以前版本的 Angular 语言服务... None 其中有效..

我的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 {}

Answer 1

我自己运行前一阵子也犯了这个错误。

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

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

Answer 2

试试这个。

IN .ts 文件:

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

   ngOnInit(){
     this.valid = true;
   }

}

在HTML

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

这里使用Structural Binding in Angular就能识别你的“有效”属性.

Answer 3

从 Github 开始，禁用 Use legacy View Engine language service 解决了问题。

进入 Angular 语言服务 的扩展设置并取消选中 Use legacy View Engine language service。

属性更新到 Angular 13 后出现绑定错误

Property binding error after updating to Angular 13

angular

angular-language-service

angular13

属性 更新到 Angular 13 后出现绑定错误

Property binding error after updating to Angular 13

angular

angular-language-service

angular13

属性更新到 Angular 13 后出现绑定错误