另一个“无法绑定到 'ngIf'" [英] Yet another "Can't bind to 'ngIf'"

问题描述

我在此处和其他地方查看了数十篇带有相同错误消息的帖子，以及整个 模块常见问题解答，但仍然没有找到适合我的解决方案.(例如，问题 35543028、35939950、40426432、40828068、44898901、45436552、47660922、50200329、59212318)他们检查:

• ngIf 的正确大小写:检查
• 主模块导入 BrowserModule:检查
• 创建组件的模块导入CommonModule:N/A；组件来自主模块，其中有 BrowserModule，它导入和导出 CommonModule
• 无论如何都将 CommonModule 添加到主模块中(在过去的某个时候需要):检查
• 条件表达式是有效的语法:检查

所以我不知道还有什么可能会这样做.我目前最好的猜测是该服务可能需要以某种方式提供 CommonModule.我尝试为此创建一个功能模块，但当它似乎没有帮助时我又将其取出.

<小时>

问题.dialog.html:

<代码>...<div *ngIf="data.technicalDetails"><h2>技术细节</h2><p>{{data.technicalDetails}}</p>

...

问题.service.ts:

导出接口结果{...技术细节:字符串；};@成分({选择器:'问题对话框'，templateUrl: 'problem.dialog.html'})导出类 ProblemDialog{构造函数(public dialogRef: MatDialogRef,@Inject(MAT_DIALOG_DATA) 公共数据:结果) { }}@Injectable()导出类 ProblemService 实现 NextObserver、ErrorObserver、OnDestroy{...公共下一个(结果:结果):无效{...this.dialog.open(ProblemDialog, { data: result });}}

new-db.component.ts:

<代码>...@成分({选择器:'app-new-db'，templateUrl: './new-db.component.html',styleUrls: ['./new-db.component.scss']})导出类 NewDbComponent{构造函数(私人 fb:FormBuilder，私有 http: HttpClient,私人问题服务:问题服务，@Inject('BASE_URL') 私有 baseUrl: 字符串){ }...提交(){...this.http.post(this.baseUrl + 'api/databases/create', proto).subscribe(this.problemService);}}

app.module.ts:

<代码>...从@angular/common"导入 { CommonModule };从'@angular/platform-b​​rowser' 导入 { BrowserModule };从'./problem/problem.service'导入{问题服务}；@NgModule({声明: [...新建数据库组件],进口:[...BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),通用模块，],供应商: [问题服务],引导程序:[AppComponent]})导出类 AppModule...

<小时>

Angular CLI 9.1.4、Node 12.14.0、操作系统 win32 x64、Angular 9.1.4.否则，项目构建和运行良好.

解决方案

你的代码中也有 ProblemDialog 组件，但你没有在 app 模块中声明，你可以这样声明:

<代码>...从@angular/common"导入 { CommonModule };从'@angular/platform-b​​rowser' 导入 { BrowserModule };从'./problem/problem.service'导入{问题服务}；@NgModule({声明: [...新建数据库组件，ProblemDialog//添加这个],进口:[...BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),通用模块，],供应商: [问题服务],入口组件:[...ProblemDialog//添加这个]引导程序:[AppComponent]})导出类 AppModule...

I've looked at dozens of posts here and elsewhere with the same error message, plus the entire modules FAQ, but still haven't found a solution that works in my case. (E.g., questions 35543028, 35939950, 40426432, 40828068, 44898901, 45436552, 47660922, 50200329, 59212318...) They pointed out these things to check:

• Correct capitalization of ngIf: check
• The main module imports BrowserModule: check
• The module that creates the component imports CommonModule: N/A; the component comes from the main module, which has BrowserModule, which imports and exports CommonModule
• Add CommonModule to the main module anyway (needed at some point in the past): check
• The conditional expression is valid syntax: check

So I don't know what else might be doing this. My best guess at the moment is that the service maybe needs to provide CommonModule somehow. I tried creating a feature module for that but I took it back out when it didn't seem to help.

---

Problem.dialog.html:

...
<div *ngIf="data.technicalDetails">
    <h2>Technical details</h2>
    <p>{{data.technicalDetails}}</p>
</div>
...

Problem.service.ts:

export interface Result
{
    ...
    technicalDetails: string;
};

@Component({
    selector: 'problem-dialog',
    templateUrl: 'problem.dialog.html'
})
export class ProblemDialog
{
    constructor(
        public dialogRef: MatDialogRef<ProblemDialog>,
        @Inject(MAT_DIALOG_DATA) public data: Result) { }
}

@Injectable()
export class ProblemService implements NextObserver<Result>, ErrorObserver<Result>, OnDestroy
{
    ...
    public next(result: Result): void
    {
        ...
        this.dialog.open(ProblemDialog, { data: result });
    }
}

new-db.component.ts:

...
@Component({
    selector: 'app-new-db',
    templateUrl: './new-db.component.html',
    styleUrls: ['./new-db.component.scss']
})
export class NewDbComponent
{
    constructor(
        private fb: FormBuilder,
        private http: HttpClient,
        private problemService: ProblemService,
        @Inject('BASE_URL') private baseUrl: string)
    { }

    ...
    onSubmit()
    {
        ...
        this.http.post<Result>(this.baseUrl + 'api/databases/create', proto)
            .subscribe(this.problemService);
    }
}

app.module.ts:

...
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { ProblemService } from './problem/problem.service';

@NgModule({
    declarations: [
        ...
        NewDbComponent
    ],
    imports: [
        ...
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        CommonModule,
    ],
    providers: [
        ProblemService
    ],
    bootstrap: [AppComponent]
})
export class AppModule
...

---

Angular CLI 9.1.4, Node 12.14.0, OS win32 x64, Angular 9.1.4. The project builds and runs fine otherwise.

解决方案

You also have ProblemDialog component in your code and you have not declared in app module, You can declare it like this:

...
import { CommonModule } from "@angular/common";
import { BrowserModule } from '@angular/platform-browser';
import { ProblemService } from './problem/problem.service';

@NgModule({
    declarations: [
        ...
        NewDbComponent,
        ProblemDialog //add this
    ],
    imports: [
        ...
        BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
        CommonModule,
    ],
    providers: [
        ProblemService
    ],
    entryComponents: [
      ...
      ProblemDialog //add this
    ]
    bootstrap: [AppComponent]
})
export class AppModule
...

这篇关于另一个“无法绑定到 'ngIf'"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！