从 Flask 获取 JSON 到 Angular

Question

所以我在 4 天前开始尝试 Angular。

到目前为止，我想从我的后端 Flask 服务器获取一些有用的 JSON 数据到我的前端 Angular。

问题在于

JSON 数据没有保存到我的变量中
无法迭代

我不知道我做错了什么，现在寻求你的帮助。

JSON 文件具有此结构。

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

在我的浏览器中显示。

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

在评论员指出我使用的不是数组，因此我无法迭代测试之前我提出的问题。

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

但是当这段代码改为

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

尝试构建时出现错误。说 error TS2339: Property 'id' does not exist on type 'Test[]'.

但是接口已经定义了这些（id和name），所以我由此得出的唯一结论是测试必须是空的。

我的 tests.service.ts 应该得到类型测试的 Observable 数组

...
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();
  }

}

测试使用的接口。

export interface Test {
   id: number;
   name: string;
}

Console.log(tests) returns空。

也许你们中的某个人可以提供帮助并指出问题所在。

干杯！

编辑：

添加了测试界面。

Answer 1

如果你有一个test数组，代码有错误：

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

必须是：

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

因为每个测试都有属性 id。如果文件具有以下结构：

{"id":[1,2,3],"name":["Test 1","Test 2","Test 3"]} 根据您的代码，响应必须是：

[
   {'id': 1, name: 'Test 1'},
   ...
]

您需要在服务 return 数据时转换处理 return 的文件。

您可以处理您的回复：

a.id.map( item => {return {"id": item, "name": a.name[item - 1]}} )
0: Object { id: 1, name: "Test 1" }
1: Object { id: 2, name: "Test 2" }
2: Object { id: 3, name: "Test 3" }

从 Flask 获取 JSON 到 Angular

Getting JSON from Flask to Angular

typescript

flask-restful

angular