如何在角度4中将值分配给子组件属性？

Question

While using ngif, I not able to get the element reference of the child component. after a lot of searches, to get the element, need to use view children instead of view child.The thing is I am able to get the child reference but not able to assign the values to child properties.

here CorrespondenceAddressComponent is my child component. I am assigning the values to one of the correspondence address component object(AddressComponentMetadataDto ) in manage person component-SetControlsReadModeInPerson method. I am getting undefined while assigning the values or calling the child component methods.

ManagePersonComponent:

    export class ManagePersonComponent extends ManagePartyComponent implements AfterViewInit  {

            ngAfterViewInit(): void {
                this.CurrentPartyType = CurrentPartyTypeEnum.Person;
                this.GetInitialDataFromService();
                this.SetControlsReadModeInPerson(this.IsReadonly);
            }

            SetControlsReadModeInPerson(isReadOnly: boolean): void {
this.CorrespondenceAddressComponent.AddressComponentMetadataDto.IsPostalCodeDisabled = isReadOnly;
        }

ManagePartyComponent(base component of ManagePersonComponent):

 export class ManagePartyComponent extends ProjectPageComponentBase {

        @ViewChildren(CorrespondenceAddressComponent) CorrespondenceAddressComponent: CorrespondenceAddressComponent;

    }

Html:

 <form #form="ngForm" [ngClass]="{'form-submitted' : form.submitted }" (ngSubmit)="SaveAndNavigate()">
        <toolbar [ShowSaveButton]="!IsReadonly"></toolbar>
        <p-tabView [(activeIndex)]="SelectedTabIndex">
               <p-tabPanel [header]="'Caption.CRM.CorrespondenceAddress' | translate">
            <correspondence-address [ParentForm]="form"></correspondence-address>
        </p-tabPanel>
     </p-tabView>
    </form>

CorrespondenceAddressComponent:

export class CorrespondenceAddressComponent extends ProjectPageComponentBase {

    AddressComponentMetadataDto= new AddressComponentMetadataDto();

    ngOnInit():void {

    }
}

Answer 1

ViewChildren will return a QueryList, whereas ViewChild returns a single match.

If you really need to use ViewChildren, make sure you type it correctly:

export class ManagePartyComponent extends ProjectPageComponentBase {
    @ViewChildren(CorrespondenceAddressComponent) 
    CorrespondenceAddressComponents: QueryList<CorrespondenceAddressComponent>;
}

And treat it like an enumerable:

SetControlsReadModeInPerson(isReadOnly: boolean): void {
   const correspondenceAddressComponent = this.CorrespondenceAddressComponents.first;
   correspondenceAddressComponent.AddressComponentMetadataDto.IsPostalCodeDisabled = isReadOnly;
}

Otherwise, use ViewChild instead:

export class ManagePartyComponent extends ProjectPageComponentBase {
    @ViewChild(CorrespondenceAddressComponent) 
    CorrespondenceAddressComponents: CorrespondenceAddressComponent;
}

So that you don't need to work with enumerable objects. If you try and reference AddressComponentMetadataDto on a QueryList, you'll get undefined, and further referencing IsPostalCodeDisabled on undefined will give you your error.

I'm going to go out on a limb and say this is your problem.

This stackblitz should be rather close to what you're trying to do: https://stackblitz.com/edit/angular-jnqwma?file=src%2Fapp%2Fcomponents%2Fparent-component.ts