使用 Angular 显示来自 JSON 文件的数据

Question

因为所有问题看起来都过时了所以我问这个问题。

首先，我需要说明的是，我 4 天前刚开始 Angular，所以请向您的 child（或接近那个哈哈的东西）解释一切。

我目前正在尝试从 Flask 服务器检索 JSON。

它具有这种格式。

{"id":[1,2,3],"name":["Test 1","Test 2","Test 3"]}

示例将缺少导入，因为它在测试时工作正常，现在数据应该来自服务器。

当我尝试使用 *ngFor 进行迭代时，出现以下错误。

Error: "Error trying to diff 'Test 1,Test 2,Test 3'. Only arrays and iterables are allowed"

这个HTML是：

<ul>
  <li *ngFor="let test of tests">
          <a routerLink="/detail/{{test.id}}">
          <span>{{test.id}}</span> {{test.name}}
          </a>
  </li>
</ul>

在我的 test.service.ts 中，它看起来如下。

...
import { HttpClient, HttpHeaders } from '@angular/common/http';

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

private testUrl = 'http://my.server/tests';

constructor(
  private http: HttpClient
  ) { }

getTests(): Observable<Test[]> {
        return this.http.get<Test[]>(this.testUrl);
        }
...

在我的 tests.component.ts 中是这样的：

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

  getTests(): void {
        this.testService.getTests()
                .subscribe(tests => this.tests = tests);

  }


  constructor(private testService: TestService) { }

  ngOnInit(): void {
  this.getTests();
  }

}

想了 2 个小时后，我不知道该怎么做。

如果缺少什么请告诉我。

干杯！

Answer 1

let test of tests

这是你问题的根源。这不是可迭代对象或数组。 tests.id 和 tests.name 这些是数组。看服务器的响应就很清楚了。 ngFor 将在 tests.id 或 tests.name 上工作。 tests 只是一个对象。

Answer 2

从日志中可以看出，*ngForOf只能用于数组。

{"id":[1,2,3],"name":["Test 1","Test 2","Test 3"]}

您收到此 json 对象（不是数组）并尝试对其使用 *ngForOf。

使用 Angular 显示来自 JSON 文件的数据

Displaying data from a JSON file with Angular

typescript

angular

angular10