Angular 4 httpClient get items接口转换

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // ... 其他模块
    HttpClientModule
  ],
  // ... 其他配置
})
export class AppModule { }

export interface Item {
  id: number;
  name: string;
  // ... 其他属性
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Item } from './item.model'; // 假设你的模型文件名为item.model.ts

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

  private apiUrl = 'https://api.example.com/items'; // 替换为你的API URL

  constructor(private http: HttpClient) {}

  getItems(): Observable<Item[]> {
    return this.http.get<{ items: Item[] }>(this.apiUrl).pipe(
      map(response => response.items)
    );
  }
}

import { Component, OnInit } from '@angular/core';
import { ItemService } from './item.service';
import { Item } from './item.model';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent implements OnInit {
  items: Item[] = [];

  constructor(private itemService: ItemService) {}

  ngOnInit(): void {
    this.itemService.getItems().subscribe(items => {
      this.items = items;
    });
  }
}

<ul>
  <li *ngFor="let item of items">
    {{ item.name }}
  </li>
</ul>