Как назначить значения свойству дочернего компонента в angular 4?

Question

При использовании ngif я не смог получить ссылку на элемент дочернего компонента. после многих поисков, чтобы получить элемент, нужно использовать дочерние представления вместо дочерних. Представление в том, что я могу получить дочернюю ссылку, но не могу присвоить значения дочерним свойствам.

здесь CorrespondenceAddressComponent - мой дочерний компонент. Я присваиваю значения одному из объектов компонента адреса корреспонденции (AddressComponentMetadataDto) в методе управления person-component-SetControlsReadModeInPerson. Я получаю неопределенный при назначении значений или при вызове методов дочернего компонента.

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(базовый компонент 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 возвращает QueryList, тогда как ViewChild возвращает одно совпадение.

Если вам действительно нужно использовать ViewChildren, убедитесь, что вы набрали его правильно:

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

И относиться к нему как к перечисляемому

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

В противном случае используйте взамен ViewChild:

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

Так что вам не нужно работать с перечисляемыми объектами. Если вы попробуете и ссылку AddressComponentMetadataDto на QueryList, вы получите неопределенный, и дальнейшие ссылки IsPostalCodeDisabled на неопределенное даст вам вашу ошибку.

Я собираюсь выйти на конечности и сказать, что это ваша проблема.

Этот стек должен быть довольно близок к тому, что вы пытаетесь сделать: https://stackblitz.com/edit/angular-jnqwma?file=src%2Fapp%2Fcomponents%2Fparent-component.ts