获取对象角度 CLI 的数组答案

【问题标题】：get array of object angular CLI获取对象角度 CLI 的数组
【发布时间】：2019-04-28 15:09:22
【问题描述】：

您好，我正在尝试从 Angular 的 get 请求中获取数据。我有一个看起来像这样的班级公寓：

export class Apartment {

  id: number;
  address: string;

  constructor(id: number, name: string) {

      this.id = id;
      this.name = name;
 }
 }

一项服务

 @Injectable({
 providedIn: 'root'
 })
 export class Service {

 baseURL = 'http://localhost:3000';

 constructor(private httpClient: httpClient) {}

 getApartments() {
     return this.httpClient.get(this.baseURL + '/apartments');
 }
 }

一个组件

 export class SettingsComponent implements OnInit {

 apartments: Apartment[] = [];

 constructor(private apiService: Service) {
   // todo: fetch data here...
}}

我有一个可以工作的 rest api 和一个可以读取的 json 文件，如下所示：

 {
   "id" : 0,
   "address: "not assinged yet"
 }

如何读取数据并将其转换为 Apartment 数组？

【问题讨论】：

标签： angular http get

【解决方案1】：

如果你没有任何类特定的方法，我自己不会在这里使用类，只是一个接口。但是，如果您确实想要一个类并将数据的实例创建到该类，则需要映射您的数据，假设您得到一个数组。还要告诉 Angular 你在请求中得到了什么：

 getApartments() {
   return this.httpClient.get<Apartment[]>(this.baseURL + '/apartments').pipe(
     map((arr) => arr.map(x => new Apartment(x.id, x.address)))
   )
 }

然后在你的组件中：

ngOnInit() {
  this.apiService.getApartments()
    .subscribe((data: Apartment[]) => this.apartments = data);
}

但正如我提到的，如果类中没有方法，我会使用接口：

export interface Apartment {
  id: number;
  address: string;
}

和获取请求，简单地说：

 getApartments() {
   return this.httpClient.get<Apartment[]>(this.baseURL + '/apartments')
 }

并订阅上述组件。

【讨论】：

如果我使用接口和相关的getApartments方法我还需要订阅或者getApartments调用就够了吗？
通过 http-requests 我们正在处理冷的 observables，你总是需要订阅，要么使用 subscribe 要么使用模板中的 async 管道:)
如果不需要处理 TS 文件中接收到的数据，使用异步管道非常方便：angular.io/api/common/AsyncPipe 但是如果您需要以某种方式在 TS 文件中操作数据，我建议使用subscribe。

【解决方案2】：

在您的订阅中，您只需要像这样声明(data:any)

constructor(private apiService: Service) {
    this.apiService.getApartments().subscribe((data:any)=>{
        this.apartments = data;
    });
}

【讨论】：

不要使用任何。这违背了 TYPE 脚本的目的。始终键入您的数据，即使只是为了您自己。假设你想通过调试让你的生活更轻松；）
在这种情况下，他为公寓定义了类型，如果你不使用任何类型，它会显示错误不能不投射
好吧，那就使用定义的类型，而不是any。

【解决方案3】：

您的 API 是否返回公寓列表？如果是，您可以这样处理-

export class SettingsComponent implements OnInit {

  apartments: Apartment[] = [];

  constructor(private apiService: Service) {}
}

ngOnInit(){
  this.fetchApartments();
}

fetchApartments(){
  this.apiService.getApartments().subscribe(
    response => {
      this.apartments = response;
    }
  );
}

或者，

constructor(private apiService: Service) {
  this.apiService.getApartments().subscribe(
    response => {
      this.apartments = response;
    }
  );
}

【讨论】：