Yet another “Can't bind to 'ngIf'”

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/61706846/yet-another-cant-bind-to-ngif

标签

angular

angular-services

angular-module