使用 observables、订阅和 http 获取数据，angular

Question

我正在尝试从 API 中获取数据，到目前为止，我可以获取 controle.log 中的数据并使用 json 打印出来。但是，我无法从界面或 class 获取 ID、名称...。我不知道为什么我不能得到它。有人知道吗？

我也试过 movie[] class 而不是 IData[] 但它没有造成任何差异。

export class MoviesService {

private showMovies = new Subject<IData[]>();
movies$ = this.showMovies.asObservable();

  constructor(private http: HttpClient) { }

  getServerData(){
    this.http.get<IData[]>("https://medieinstitutet-wie-products.azurewebsites.net/api/products").subscribe((dataFromApi: IData[]) =>
    this.showMovies.next(dataFromApi))
  }
}



export class ShowmoviesComponent implements OnInit {

 showMovies: IData [] = []
  constructor(private service: MoviesService) { }

  ngOnInit(): any {
    this.service.movies$.subscribe((dataFromService: IData[]) => {
      return this.showMovies = dataFromService,
      console.log(dataFromService)
    })
      this.service.getServerData()   
  }
}


export class Movies{
    id: string
    name: string
    description: string
    price: string
    imageUrl: string
    year: string
    added: string
    productCategory: string

    constructor(
        id: string, 
        name: string, 
        description: string, 
        price: string,
        imageUrl: string,
        year: string,
        added: string,
        productCategory: string){
        this.id = id
        this.name = name
        this.description = description
        this.price = price
        this.imageUrl = imageUrl
        this.year = year
        this.added = added
        this.productCategory = productCategory
    }
}


export interface IData{
 
        id: string
        name: string
        description: string
        price: string
        imageUrl: string
        year: string
        added: string
        productCategory: string
}

<div *ngFor="let m of showMovies">
    {{ showMovies | json}}
</div>

Answer 1

尝试用 BehaviorSubject

替换您的 subject

此外，您使用 ngFor 的方式有误。应该是：

<div *ngFor="let m of showMovies">
    {{ m | json}}
</div>

最后，不要忘记取消订阅您的可观察对象：在您的情况下，您可以根据需要使用 take(1) 第一个 ->

 this.http.get<IData[]>("https://medieinstitutet-wie-products.azurewebsites.net/api/products").pipe(take(1).subscribe((dataFromApi: IData[]) =>
    this.showMovies.next(dataFromApi))
  }

使用 observables、订阅和 http 获取数据，angular

get data with observables, subsscribe and http, angular

http

subscribe

observable

angular