Еще один Не удается связать с «ngIf»

Я просмотрел десятки сообщений здесь и в других местах с одним и тем же сообщением об ошибке, а также весь Часто задаваемые вопросы по модулям, но до сих пор не нашел решения, которое работает в моем случае. (Например, вопросы 35543028, 35939950, 40426432, 40828068, 44898901, 45436552, 47660922, 50200329, 59212318...) Они указали следующие вещи для проверки:

  • Правильная заглавная буква ngIf: проверьте
  • Основной модуль импортирует BrowserModule: проверьте
  • Модуль, создающий компонент, импортирует CommonModule: N/A; компонент исходит из основного модуля, в котором есть BrowserModule, который импортирует и экспортирует CommonModule
  • В любом случае добавьте CommonModule к основному модулю (необходимо в какой-то момент в прошлом): проверьте
  • Условное выражение имеет допустимый синтаксис: проверить

Так что я не знаю, что еще может делать это. Мое лучшее предположение на данный момент заключается в том, что службе, возможно, нужно каким-то образом предоставить CommonModule. Я попытался создать для этого функциональный модуль, но удалил его, когда это не помогло.

Проблема.диалог.html:

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

Проблема.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, Node 12.14.0, ОС win32 x64, Angular 9.1.4. В противном случае проект строится и работает нормально.


angular angular-module angular-services
person Matt Tsōnto    schedule 10.05.2020    source источник
comment
core.js:12737 Невозможно привязать к ngIf, так как это неизвестное свойство div.   -  person Matt Tsōnto    schedule 10.05.2020
comment
Problem.dialog.html является частью того же модуля?   -  person Sajeetharan    schedule 10.05.2020
comment
Насколько мне известно, да, если службы не создают невидимый модуль или что-то в этом роде. Я явно объявил только модули app.module.ts, app.server.module.ts и app-routing.module.ts.   -  person Matt Tsōnto    schedule 10.05.2020
comment
добавить ProblemDialog в раздел объявления и entryComponents app.module.ts   -  person Gaurav Srivastava    schedule 10.05.2020
comment
Пожалуйста, удалите ProblemDialog из службы, добавьте в отдельный компонент. Затем в app.module.ts добавьте компонент в массив объявлений. Также нет необходимости добавлять службу в массив поставщиков, вы можете использовать @Injectable({providedIn: 'root',}) в службе.   -  person Dinindu Kanchana    schedule 10.05.2020
comment
В каком модуле объявлен ProblemDialog?   -  person David    schedule 10.05.2020
comment
@GauravSrivastava Это сработало, спасибо! Добавьте ответ, чтобы я мог его принять, пожалуйста?   -  person Matt Tsōnto    schedule 10.05.2020
comment
И теперь я вижу, что упустил: material.angular.io/components/dialog/   -  person Matt Tsōnto    schedule 10.05.2020

Ответы (1)


arrow_upward
3
arrow_downward

У вас также есть компонент ProblemDialog в вашем коде, и вы не объявили его в модуле приложения. Вы можете объявить его следующим образом:

...
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
...
person Gaurav Srivastava    schedule 10.05.2020