还有一个 "Can't bind to 'ngIf'"

Question

我已经查看了此处和其他地方的数十篇具有相同错误消息的帖子，以及整个 modules FAQ，但仍未找到适用于我的情况的解决方案。（例如，问题 35543028、35939950、40426432、40828068、44898901、45436552、47660922、50200329、59212318...）他们指出了这些要检查的内容：

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

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

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 });
    }
}

新-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，节点 12.14.0，OS win32 x64，Angular 9.1.4。该项目构建并运行良好。

Answer 1

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

...
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
...

还有一个 "Can't bind to 'ngIf'"

Yet another "Can't bind to 'ngIf'"

angular

angular-services

angular-module