来自订阅的异步模板绑定 angular 13

Question

我正在尝试在 ngOninit 上绑定 subscribe 上的数据，这是页面 profile.component.ts下面。

export class ProfileComponent implements OnInit {
  public userDetailsArr: UserDetails[] = [];
  private subscriptions: Subscription[] = [];

 async ngOnInit() {
    await this.userManagementService.currentUsersIdValue
      .subscribe(async (userId: number) => {
        const user = await this.userManagementService.getUsers(userId.toString())
          .subscribe(x => {
            this.userDetailsArr = x;
            console.log(this.userDetailsArr); // data shows here
          });
        this.subscriptions.push(user);
      });

  console.log(this.userDetailsArr); // data does not show here
}

}

这里是HTML模板页面profile.component.html如下所示。

<form>
    <div>
      <ng-container *ngIf="userDetailsArr as obj">
        {{ obj.firstName }} //does not show data
      </ng-container>
    </div>
    <input type="text" placeholder="First Name" [(ngModel)]="userDetails.FirstName" /> //does not bind model
</form>

数据采用这种格式。

[{
  id: 9, addressID: 0, firstName: 'Dang', lastName: 'Kumar'
}]

我在 JSON 中成功获取了数据，但是，

它接收 camelCase 但我的模型是 PascalCase
它不绑定 {{ obj.firstName }} 或 [(ngModel)]="userDetails.FirstName" 上的数据，因为据我所知，后者是 Pascal 的，传入的 JSON 是 Camel 的。
即使我在 Subscribe userDetails.FirstName = "test" 中通过，它仍然不会绑定到 [(ngModel)]="userDetails.FirstName"。

Answer 1

如果您不使用异步管道，您应该使用 changeDetector.markForCheck() 将组件标记为脏。也不要使用嵌套订阅，我用 switchMap()

解决了这个问题

const userSubscription = this.userManagementService.currentUsersIdValue.pipe(
   switchMap((userId) => this.userManagementService.getUsers(userId.toString())),
).subscribe((users) => {
  this.userDetailsArr = users;
  this.changeDetector.markForCheck();
});
this.subscriptions.push(userSubscription);

Answer 2

在我使用的服务页面中。 private currentUserId = new Subject<string>(); 这是下面使用的代码。

  private currentUserId = new Subject<string>();
  public get currentUsersIdValue() {
    return this.currentUserId;
  }
  public set currentUsersIdValue(value) {
    this.currentUserId = value;
  }

现在的问题是 new Subject<string>()，我将其更改为 new BehaviorSubject<string>('')，效果很好。在订阅期间 subject 不会工作，只有 BehaviorSubject 会。

来自订阅的异步模板绑定 angular 13

async template bind from subscribe angular 13

rxjs

typescript

angular

rxjs-observables

angular13