Question

所有问题看起来都已经过时了，我正在问这个问题。

首先，我要提一下我是4天前刚开始Angular的，所以请向您的孩子解释一切（或者类似的事情）。

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

它具有这种格式。

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

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

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

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或t ests.name上运行。 tests只是一个对象。

Answer 2

从日志中可以看到，*ngForOf仅可用于数组。

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

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

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

2 个答案: