json 在Angular 13中从请求呈现数据时出现问题

cidc1ykv  于 2022-11-19  发布在  Angular
关注(0)|答案(2)|浏览(120)

当我在控制器中得到select时,我在填充select时遇到了问题,我转到了select中要用 *ngFor完成的变量,只有一个选项出现在数组中的所有数据中。我需要为数组中的每个元素创建一个选项。
以下是图片

服务

enter image description here

接口

enter image description here

控制器

enter image description here

HTML格式

enter image description here

模拟JSON

enter image description here

mo49yndu

mo49yndu1#

也许你应该直接发布代码,因为它比图片更容易阅读。但是从我在图片中看到的东西来看,有些东西似乎放错了地方。这对我来说就像是学校的作业。而且解释得很糟糕。但是我会试着猜一猜。
在控制器上,您应该将await放在对服务的调用处。类似于:

cidades : any[];

async listaMunicipios(sigla : string) {
   this.cidades = await this.service.listaCidades(sigla).toPromise();
}

并在ngInit上调用城市列表,或者你知道sigla的值的任何地方。不要用“cidades”作为Observable。无论如何,也许你也不应该在模板上使用async管道。Cidades.cidades的类型是什么?any[]不是一个好的类型,期望angular在ngFor的cidade中输出any。最好是string[]。至少在JSON中它是一个字符串。你可以有更好的东西,但是带有城市名称的字符串是可以接受的。你能改变服务JSON输出吗?

  • 在模板中

标签的目的是什么?它是为了显示带有指定“sigla”的州的城市列表?如果是这样,模板可能应该有:

<select formControlName="codMunicipio">
    <option *ngFor="let cidade of cidades" [value]="cidade"> {{cidade}} </option>
   </select>

我建议你在界面上有一个城市的代码和名称。

interface Cidade {
  codigo: string;
  nome: string;
}

如果你觉得我的回答有用,请接受它。
希望这对你有帮助!

bfnvny8b

bfnvny8b2#

我实际上得到的东西如下:data:[1,2,3,4,5,6,7,8,9],也就是一个数组,所以我需要把这个数组的每个值放在html select的一个选项里,因为我没有一个包含key和value的对象,所以我对如何访问有点困惑。

相关问题