如何在Aurelia JS中从Web API绑定数据？

import { HttpClient } from 'aurelia-fetch-client';

export class DataService {
  constructor() {
    this.httpClient = new HttpClient();
  }

  async getDataFromAPI() {
    try {
      const response = await this.httpClient.fetch('https://api.example.com/data');
      const data = await response.json();
      return data;
    } catch (error) {
      console.error('Error fetching data:', error);
      throw error;
    }
  }
}

import { inject } from 'aurelia-framework';
import { DataService } from './data-service';

@inject(DataService)
export class MyComponent {
  constructor(dataService) {
    this.dataService = dataService;
    this.data = [];
  }

  async activate() {
    try {
      this.data = await this.dataService.getDataFromAPI();
    } catch (error) {
      // Handle error
    }
  }
}

<template>
  <h1>Data from API:</h1>
  <ul>
    <li repeat.for="item of data">${item.name}</li>
  </ul>
</template>