组件 ngOninit 模型绑定问题

Question

组件 profile.component.ts 是一个 子组件 并且正在尝试绑定如下所示的虚拟模型。

export class ProfileComponent implements OnInit {
constructor() {
}
objName: any;
ngOnInit() {
    this.getAsyncData().subscribe(j => {          
      this.objName = j.FirstName;
    });
}

getAsyncData() {
    // Fake Slow Async Data
    return of({
      FirstName: 'Luke',
      LastName: 'Skywalker'
    }).pipe(delay(2000));
  }

}

下面是我的 HTML 页面。

<div class="col-12 col-form-label mb-5">
      {{objName | async}}
</div>

现在这个 this.objName = j.FirstName; 获取数据但不绑定在 HTML 页面上，无论我是否在 HTML 页面上使用 async。

更新 1：没有 async.
的浏览器错误

Answer 1

如果你想使用 | async 管道，它只能在 Observable 上工作。

在你的情况下 this.objName 不是可观察的。 this.objName 是对象 j 上属性 Firstname 发出的值。您正试图将单个值视为可观察值 - 这不是它的工作原理。按照我的例子来更好地理解这一点。

在命名属性时也尝试使用驼峰式而不是 PascalCase（例如 FirstName 到 firstName）。

<div>
  {{ objName$ | async }}
  <br />
  <br />
  <ng-container *ngIf="objName$ | async as obj">
    {{ obj.FirstName }}
  </ng-container>
</div>

@Component({
  selector: 'async-pipe',
  templateUrl: './async-pipe.component.html',
  styleUrls: ['./async-pipe.component.css'],
})
export class AsyncPipeComponent implements OnDestroy, OnInit {

  objName$: Observable<any>;
  unsubscribe$: Subject<void> = new Subject<void>();

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }

  ngOnInit() {
    this.objName$ = this.getAsyncData().pipe(takeUntil(this.unsubscribe$));
  }

  getAsyncData() {
    // Fake Slow Async Data
    return of({
      FirstName: 'Luke',
      LastName: 'Skywalker',
    }).pipe(delay(2000));
  }
}

工作示例：https://stackblitz.com/edit/async-pipe-8c2brn?file=app%2Fasync-pipe%2Fasync-pipe.component.ts

组件 ngOninit 模型绑定问题

Component ngOninit model bind issue

angular

typescript

angular13