angular - @if @else (or *ngIf) issue and change detection - Stack Overflow

admin管理员组

文章数量:1123047

I have a component that has conditional logic using an @if (or *ngIf) condition on a flag, e.g., @if (model.editable) or <ngContainer *ngIf="model.editable"...>, in its html file, which displays one set of controls for the true condition and another for false.

In ngOnChanges in the typescript file I call a service method that returns the model which has multiple properties including editable. The other properties are bound to various different control properties, e.g., <input [value]="model.wbsNumber" ...>.

@if (model?.editable) {
<ng-container ngModelGroup="wbs">
    <app-field-dropdown #wbsProgram
                        id="project-wbs-wbsProgramId"
                        name="wbsProgramId"
                        [field]="PMBField.ProjectSummaryProgram"
                        [required]="true"
                        [options]="wbsPrograms"
                        (change)="getWbsChildren(wbsProgram.name)"
                        ngModel />
   <!--Other controls-->
</ng-container>
}
@else {
<app-field-text-input id="project-wbs-wbsProgramName"
                      [field]="PMBField.ProjectSummaryProgram"
                      [readonly]="true"
                      [value]="model?.wbsProgramName" />

   <!--Other controls-->
}

ngOnChanges(changes: SimpleChanges): void {
        if (changes["projectId"]?.previousValue !== this.projectId) {
            if (this.projectId) {
                this._projectWbsService.getProjectWbs({ request: this.projectId.id }).subscribe(response => {
                    this.model = response;
                    // Other code
            });
            } else {
                this.model = undefined;
                // Other code
            }
        }
    }

If the @Input value changes and triggers the code in ngOnChanges to retrieve a new model from the server and the model.editable property changes, e.g., from true to false or vice versa, I seem to have binding issues where control values are not being updated and reflecting the correct values, i.e., model.wbsNumber is not being set on the input control. This doesn't happen if the model.editable property does not change when ngOnChanges is triggered. The values are updated correctly in the ui.

I'm sure it has to do with dynamic control construction due to the @if, but I am at a loss as to why it does not work and how to get it so that the controls reflect the correct values in the ui.

Thanks.

I have a component that has conditional logic using an @if (or *ngIf) condition on a flag, e.g., @if (model.editable) or <ngContainer *ngIf="model.editable"...>, in its html file, which displays one set of controls for the true condition and another for false.

In ngOnChanges in the typescript file I call a service method that returns the model which has multiple properties including editable. The other properties are bound to various different control properties, e.g., <input [value]="model.wbsNumber" ...>.

@if (model?.editable) {
<ng-container ngModelGroup="wbs">
    <app-field-dropdown #wbsProgram
                        id="project-wbs-wbsProgramId"
                        name="wbsProgramId"
                        [field]="PMBField.ProjectSummaryProgram"
                        [required]="true"
                        [options]="wbsPrograms"
                        (change)="getWbsChildren(wbsProgram.name)"
                        ngModel />
   <!--Other controls-->
</ng-container>
}
@else {
<app-field-text-input id="project-wbs-wbsProgramName"
                      [field]="PMBField.ProjectSummaryProgram"
                      [readonly]="true"
                      [value]="model?.wbsProgramName" />

   <!--Other controls-->
}

ngOnChanges(changes: SimpleChanges): void {
        if (changes["projectId"]?.previousValue !== this.projectId) {
            if (this.projectId) {
                this._projectWbsService.getProjectWbs({ request: this.projectId.id }).subscribe(response => {
                    this.model = response;
                    // Other code
            });
            } else {
                this.model = undefined;
                // Other code
            }
        }
    }

If the @Input value changes and triggers the code in ngOnChanges to retrieve a new model from the server and the model.editable property changes, e.g., from true to false or vice versa, I seem to have binding issues where control values are not being updated and reflecting the correct values, i.e., model.wbsNumber is not being set on the input control. This doesn't happen if the model.editable property does not change when ngOnChanges is triggered. The values are updated correctly in the ui.

I'm sure it has to do with dynamic control construction due to the @if, but I am at a loss as to why it does not work and how to get it so that the controls reflect the correct values in the ui.

Thanks.

• angular

Share Improve this question Follow edited 1 hour ago Edric 26.7k1313 gold badges8787 silver badges9595 bronze badges asked 1 hour ago HAAHAA 5344 bronze badges 2

• Could you share the code? – Mike Nguyen Commented 1 hour ago
• Added some code snippets. – HAA Commented 1 hour ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

From your code snippets, it seems that when the API fetching is finished, the change detection is not triggered to update the view with a new property value (model). You can manually activate change detection by this approach

readonly cdr = inject(ChangeDetectorRef)

ngOnChanges(changes: SimpleChanges): void {
        if (changes["projectId"]?.previousValue !== this.projectId) {
            if (this.projectId) {
                this._projectWbsService.getProjectWbs({ request: this.projectId.id }).subscribe(response => {
                    this.model = response;
                    this.cdr.detectChanges();
            });
            } else {
                this.model = undefined;
                // Other code
            }
        }
    }

本文标签： angularif else (or *ngIf) issue and change detectionStack Overflow