HTTP请求服务器数据（管道方式）

product TS

import { Component, OnInit } from '@angular/core';
import {Observable, Subscription} from 'rxjs';
import {HttpClient} from '@angular/common/http';

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

  dataSource: Subscription;

  products: Observable<any>;

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {
    // this.http.get('/api/products').subscribe((data) => this.products = data);
    // this.http.request('get', '/api/products' );
    this.products = this.http.get('/api/products' );
  }
}

product HTML

<div>
  商品信息
</div>
<ul>
  <li *ngFor="let item of products | async">
    {{item.title}}
  </li>
</ul>