在角度 8 中投射一个可观察的

Question

我无法将 observable 转换为自定义对象的选定字段（BookDetails：假设 Class 具有除 Title 之外的所有变量）。尽管进行了强制转换，但我仍然能够访问与我正在调用服务的组件相对应的 html 文件中的标题。

我有一个返回以下 JSON 的 API：

[{"id":1,
   "Title":"The Intelligence Trap",
   "Description":"Why smart people do stupid things and how to make wiser decisions",
   "Author":"David Robson",
   "FinishDate":"2019-11-08",
   "EShop":"https://www.amazon.in"}]

我需要捕获除了 Title 之外的所有内容，因此我将 myservice.ts 中 http.get 函数的 Observable 输出转换为 BookDetails 类。我创建了一个新组件，我打算在其中使用该服务。我订阅了该服务，但我仍然可以访问相应组件的 html 文件中的 Title。这是预期的行为。

以下是 PullData.service.ts 文件中的代码

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs";
import { BookDetails } from "../Interfaces/book-details";

@Injectable({
  providedIn: "root"
})
export class PullDataService {
  constructor(private http: HttpClient) {}

  public getDataFromService(): Observable<BookDetails[]> {
    return this.http.get<BookDetails[]>(
      "http://127.0.0.1:8000/Generic/newroute/"
    );
  }

  public getDummyDataFromService(): Observable<BookDetails[]> {
    return this.http.get<BookDetails[]>("/app/data/dummy.json");
  }
}

这是来自 BookDetails.ts 的代码

import { Url } from "url";

export class BookDetails {
  id: number;
  Author: string;
  FinishDate: Date;
  Description: string;
  EShop: Url;
}

我也试过这个作为界面..无济于事。 “网址”在 node_package 中可用。 请注意这里没有标题！

**import { Url } from "url";
export class BookDetails {
  id: number;
  Author: string;
  FinishDate: Date;
  Description: string;
  EShop: Url;
}**

这是组件的打字稿文件

import { Component, OnInit } from "@angular/core";
import { PullDataService } from "../PullData/pull-data.service";
import { BookDetails } from "../Interfaces/book-details";

@Component({
  selector: "app-roles",
  templateUrl: "./roles.component.html",
  styleUrls: ["./roles.component.scss"]
})
export class RolesComponent implements OnInit {
  public books: BookDetails[];

  constructor(private pds: PullDataService) {}

  ngOnInit() {
    this.pds.getDataFromService().subscribe(data => (this.books = data));
  }
}

这是comp的html文件

<ul>
  <li *ngFor="let book of books">
    Title: {{ book.Title }}
  </li>
</ul>

我使用的是 Angular 8。页面上没有错误，并且输出非常整齐的标题行，用于我的数据库中的所有记录。有人可以帮我知道我在这里做错了什么吗？我累了！ :(

Answer 1

您没有创建BookDetails 类的对象。您正在接收对象并使用它（您仅尝试进行类型转换。它不会更改对象结构。）。如果要排除接收对象的Title 属性，则必须从对象中删除Title 属性，或者需要创建类BookDetails 的对象使用构造函数。

类

export class BookDetails {
  id: number;
  Author: string;
  FinishDate: Date;
  Description: string;
  EShop: Url;

  constructor(serverObject) {
    Object.assign(this, serverObject)
  }

}

组件

import { Component, OnInit } from "@angular/core";
import { PullDataService } from "../PullData/pull-data.service";
import { BookDetails } from "../Interfaces/book-details";

@Component({
  selector: "app-roles",
  templateUrl: "./roles.component.html",
  styleUrls: ["./roles.component.scss"]
})
export class RolesComponent implements OnInit {
  public books: BookDetails[];

  constructor(private pds: PullDataService) {}

  ngOnInit() {
    this.pds.getDataFromService().subscribe(data => {
      this.books = data.map(dataObj => new BookDetails(dataObj))
    });

  }
}