来自父项的等待数据

Question

我知道这是一个常见的问题，但是我在几个问题中看到的解决方案不适用于我。

我有一个带有@Input的孩子，该孩子从父母那里接收数据，但是数据来自可观察的数据，因此它是异步的。

[我读到*ngIf="data"可以解决我的问题，但是它可以正常工作，而其他时候我得到undefined

parent.Html

<div *ngIf="submittedBy">
    <app-q-sub-subsequent-process [(confirm)]="confirm" [(submittedBy)]="submittedBy"
        [createProjectSubResponseFunction]="createProjectSubResponseFunction">
    </app-q-sub-subsequent-process>
</div>}

parent.ts

submittedBy: any = [{fisrtName:"", lastName:"", organization: ""}];
ngOnInit(){
    this.dataService.GetData().subscribe( response =>{
        this.submittedBy = response
    });
}

child.ts

@Input('submittedBy') submittedBy : any;
ngOnInit() {
    this.dataService.GetReviewerTypes().subscribe(response => {
        this.reviewerTypes = response;
        let user = {
            reviewerType: {
                reviewType:'', 
                reviewerTypeId: this.submittedBy.userTypeId
            }, 
            reviewer: {
                userId: this.submittedBy.id,
                user: `${this.submittedBy.lastName}, ${this.submittedBy.firstName}`
            }
        }
         /////////////This is where i get the error since user since 
         /////////////find returns undefiend because 
         /////////////user.reviewerType.reviewerTypeId = undefined
         user.reviewerType.reviewType = this.reviewerTypes.find(x => x.id = 
             user.reviewerType.reviewerTypeId).reviewType;
         let reviewerToAdd = { reviewerType: user.reviewerType, reviewer: user.reviewer }
         this.reviewersAdded = [{ ...reviewerToAdd }];
    },
         error => console.log(error)
    );
}

子项中的响应是这样的数组：

[
    {id:1, reviewType:'someType1'}
    {id:2, reviewType:'someType2'}
]

有时我将用户带入我的孩子中，而有时我却得到undefined和错误Cannot read property 'reviewType' of undefined

我也曾尝试捕获ngOnChanges()上的更改，但从未在此处输入。

我刚尝试过二传手：

child.ts

_submittedBy: any;
@Input('submittedBy') set submittedBy(value){
    this._submittedBy = value
};
ngOnInit() {
    this.dataService.GetReviewerTypes().subscribe(response => {
        this.reviewerTypes = response;
        let user = {
            reviewerType: {
                reviewType:'', 
                reviewerTypeId: this._submittedBy.userTypeId
            }, 
            reviewer: {
                userId: this._submittedBy.id,
                user: `${this._submittedBy.lastName}, ${this._submittedBy.firstName}`
            }
        }
         user.reviewerType.reviewType = this.reviewerTypes.find(x => x.id = 
             user.reviewerType.reviewerTypeId).reviewType;
         let reviewerToAdd = { reviewerType: user.reviewerType, reviewer: user.reviewer }
         this.reviewersAdded = [{ ...reviewerToAdd }];
    },
         error => console.log(error)
    );
}

Answer 1

在子组件中使用asyn等待希望对您有所帮助

child.ts
    @Input('submittedBy') submittedBy : any;
    public data;
    async ngOnChanges() {
        if (this.submittedBy) {
          this.data = await this.submittedBy;
    }
    }

HTML

   <div *ngIf="data">
        <app-q-sub-subsequent-process [(confirm)]="confirm" [(submittedBy)]="submittedBy"
            [createProjectSubResponseFunction]="createProjectSubResponseFunction">
        </app-q-sub-subsequent-process>
    </div>