0

我正在从数据库中提取数据，然后在组件和子组件中显示该数据。在该子组件中，有一个弹出窗口，用户可以在其中编辑数据。编辑该数据时，更改不会反映在显示的数据中。我相信这是因为我使用异步管道将此数据传递给子元素。

我可以避免使用异步管道，但这会导致错误，因为我使用依赖于这些数据的 ngIf 语句。

来自 AngularJS，这很容易，因为我只需在子指令中使用父工作区。我在这里想念什么？

父组件 - userInfo 是正在处理的数据

<!-- CONTENT -->
<div class="content">

    <ng-container *ngIf="(userInfo | async)?.data() as info">

        <mat-tab-group dynamicHeight="true"
                       style="width:60%; margin:0px 20%;">

            <mat-tab label="Bio">
                <profile-about [userData]='userData' [userInfo]="info"></profile-about>
            </mat-tab>

            <mat-tab label="Companies">
                <profile-companies [userData]='userData' [userInfo]="info"></profile-companies>
            </mat-tab>

        </mat-tab-group>

    </ng-container>

</div>
<!-- / CONTENT -->

显示数据的子组件部分

        <div class="content">

            <div class="info-line"
                 *ngIf="userInfo.occupation!==undefined">
                <div class="title">Occupation</div>
                <div class="info">{{userInfo.occupation}}</div>
            </div>

            <div class="info-line"
                 *ngIf="userInfo.skills!==undefined">
                <div class="title">Skills</div>
                <div class="info">{{userInfo.skills}}</div>
            </div>

            <div class="info-line"
                 *ngIf="userInfo.jobs!==undefined && userInfo.jobs.length>0">
                <div class="title">Jobs</div>
                <table class="info jobs">
                    <tr class="job" *ngFor="let job of userInfo.jobs">
                        <td class="company">{{job.title}}</td>
                        <td class="date">{{job.startdate}}-{{job.enddate}}</td>
                    </tr>
                </table>

            </div>

        </div>

在此子视图中打开并编辑对话框时，我尝试设置数据。它应该在绑定时自动更新。

openDialog(type) {
    const dialogRef = this.dialog.open( EditBioDialog, {
        panelClass: 'edit-bio-dialog',
        data: { userData: this.userData, userInfo: this.userInfo, type:type }
    });

    dialogRef.afterClosed().subscribe(result => {
      this.userInfo = result;
      this.FirebaseService.updateDocDataUsingId( 'users', this.userData.uid, result )
    });

}
4

1 回答 1

0

没有双向绑定。Angular（2+）依赖于“数据下降，事件上升”机制。然而，这种模式有一个简写符号，它反映了两种方式的绑定。这就是[(var)]符号。简而言之，这意味着@Input在孩子上应该有一个 namedvar和一个Outputnamed varChange：

这将像这样更改您的代码：

子组件 ts：

@Input()
userInfo: UserInfo;

@Output()
readonly userInfoChange = new EventEmitter<UserInfo>();


openDialog(type) {
  dialogRef.afterClosed().subscribe(result => {
    this.userInfoChange.emit(result);
    this.FirebaseService.updateDocDataUsingId( 'users', this.userData.uid, result )
  });
}

父组件模板：

<mat-tab label="Companies">
  <profile-companies [userData]="userData" [userInfo]="info" (userInfoChange)="onUserInfoChange($event)"></profile-companies>
</mat-tab>

父组件 ts：

private readonly userInfoUpdate = new Subject<{ data(): UserInfo }>();

readonly userInfo = merge(
  // this.where.ever.you.get.source()
  this.userInfoUpdate
)

onUserInfoChange(userInfo: UserInfo): void {
  // probably not like this
  this.userInfoUpdate.next({ data: () => userInfo });
}

不知道你的底层数据结构，但你应该更新你的源 observable 以反映新数据。或者，如果您不希望它被保存，您可以使用merge可反映更新的 observable

于 2020-05-14T16:44:31.633 回答