Angular中的地图observable <t>

如何解决Angular中的地图observable <t>

我有调用api的函数。 api返回一个对象数组。我想将响应映射到Business类型的可观察对象。我不太确定如何在getBusiness函数中正确地映射它。

样品响应

[
  {
    Id: 2,Name: "Joe"
  }
]

export interface Business {
    id: string;
    name: string;
}

getBusiness(): Observable<Business[]> {

        const url = "";

        return this.http.get(url,this.httpOptions)
        .pipe(
          map((data: Business[]) => data as Business[] )
        )
      }

@Component({
  selector: 'app-admin',templateUrl: './admin.component.html',styleUrls: ['./admin.component.scss'],})
export class Component implements OnInit {

this.apiService.getBusiness() {
      .subscribe((res: Business[]) => console.log(res))
}

解决方法

您在数组上调用map

map((data: Business[]) => data.map(business => ({ id: business.Id,name: business.Name })) )

如果您正在开发API，则应该可以将其设置为使用camelcase，这样就不必在所有地方都这样做。如果没有，则可以编写一个将每个属性的首字母小写的函数。

const firstLetterLower = val => val[0].toLowerCase() + val.substring(1);

const camelcase = obj => Object.keys(obj).reduce((result,key) => {
  result[firstLetterLower(key)] = obj[key];
  return result;
},{});

console.log(camelcase({
  Id: 2,Name: "Joe"
}));

那么您就可以使用

map((data: Business[]) => data.map(business => camelcase(business))

,

IMO，您无需在服务中强制投放。

还有const url = "";为什么？

服务-确保网址正确

getBusiness() {
    return this.http.get(url,this.httpOptions);
}

组件

ngOnInit() {
    this.apiService.getBusiness().subscribe(
     (res: Business[]) => console.log(res)
    );    
}

如果您需要以更好的标准方式执行此操作（有时这是矫kill过正）

看看NgRx / Store

,

您可以像这样键入来自httpclient的响应：

return this.http.get<Business[]>(url,this.httpOptions)

这就是全部。这样只会将输入信息提供给编译器，而不会更改响应。如果您需要实际修改响应结构以使用不同的属性名称，则必须在地图或其他内容中手动进行操作。