无法通过 Angular 中的 ngOnInit 通过 Observable 从 http.get 获取数据

Question

在我的组件初始化中，我正在从服务器获取数据

 import {Rules} from "../../interfaces/interfaces";
 rules: Rules
 ngOnInit() {
  this.tt = this.rulesService.getUserClientRules().subscribe(
   t => {
     console.log(t)
     console.log(t.clientRules.canAll)
     this.rules = t.clientRules
   },
   error => {
    console.log(error.error.message)
   }
  )
 }

我的服务代码是

getUserClientRules(): Observable<Rules> {
return this.http.get<Rules>('/api/rules/getClientUserRules/')}

and I have interface like:

export interface Rules {
 clientRules: any
}

我收到这样的回复：

**{clientRules: {canAll: true, canSee: false}}**

如何将此对象推送到我的规则对象中？我想像 rules.canAll 或 rules.canSeeAll...

那样使用它

当我尝试 console.log(this.rules) 我得到 undefined

我需要这个结构规则 { canAll: true, canSee: true } 我需要用它来检查 *ngIf="rules.canSee"

感谢您的回复！！！

Answer 1

根据您的要求，界面应该看起来像

export interface Rules {
  canAll: boolean;
  canSee: boolean;
}

然后你可以将 RxJS map 运算符从 HTTP 调用 return clientRules 属性

服务

getUserClientRules(): Observable<Rules> {
  return this.http.get<Rules>('/api/rules/getClientUserRules/').pipe(
    map(response => response['clientRules'])
  );
}

然后您可以将响应直接分配给组件中的 rules 变量

组件

rules: Rules

ngOnInit() {
  this.tt = this.rulesService.getUserClientRules().subscribe(
    t => {
      console.log(t);
      console.log(t.canAll);
      this.rules = t; // <-- the response is already the `clientRules` property
    },
    error => {
      console.log(error.error.message)
    }
  );
}

然后您可以使用安全导航运算符 ?. 在模板中使用它以避免不必要的 undefined 错误。

模板

<div *ngIf="rules?.canSee">
  User can see...
</div>

无法通过 Angular 中的 ngOnInit 通过 Observable 从 http.get 获取数据

Unable to get data from http.get via Observable via ngOnInit in Angular

undefined

typescript

angular