Map 可觀察<t>在 Angular</t>

Question

我有調用 api 的 function。 api 返回一個對象數組。 我想 map 對業務類型的可觀察對象的響應。 我不太確定如何在 getBusiness function 中正確地進行 map。

樣本響應

[
  {
    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))
}

Answer 1

您在陣列上調用 map

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

如果您正在開發 API，您應該能夠將其設置為使用駝峰式，這樣您就不必在任何地方都這樣做。 如果不是，您可以編寫一個 function 將每個屬性的第一個字母小寫。

 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))

Answer 2

IMO 你不需要在服務中使用它。

還有為什么const url = ""; , ?

服務 - 確保 URL 正確

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

零件

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

如果您需要以更好的標准方式執行此操作（有時它是矯枉過正的）

看看 NgRx/Store

Answer 3

您可以像這樣鍵入來自 httpclient 的響應：

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

一切都是如此。 這僅向編譯器提供輸入信息，並且不會更改響應。 如果您需要實際修改響應結構以具有不同的屬性名稱，則必須在 map 或其他東西中手動執行此操作。