angular - 等待来自父母的数据

Question

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

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

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

父.HTML

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

父.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)
    );
}

标签： angulartypescriptasynchronous

Answer 1

在子组件中使用 asyn await 希望它有帮助

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>