Question

在角度项目中，我有以下界面：

export interface FruitsType {

  id: String;
  name: String;
  selected : String;
}

关注JSON：

{
  [
      {"id" :"f1", "name": "apple", "selected": "false"},
      {"id": "f2" , "name":"orange", "selected": "false"}
   ]
}

目标是将水果的名称分配给一个复选框。

我已经使用服务阅读了JSON文件 - 在 ngonINIT 中 - 它的输出如下：

0:{id: "f1", name: "apple", selected: "false"}
1:{id: "f2", name: "orange", selected: "false"}

我想将上面输出的id和名称分配给界面中的对应项并将其推送到数组。那可能吗？怎么样？

这里我尝试了什么

// here is my service: 

 getJSON (): Observable<FruitsType[]> {
    return this.http.get<FruitsType[]>((this.configUrl))
  }
  
// and here is how i get the response:

this.jsonService.getJSON().subscribe(response => {

      // THAT WORKS FINE
      console.log("here is the forst fruit: " + response[1].name);
      console.log("here is the forst fruit: " + response[1].id);
      //console.log(response.length);


      // WANTS TO ADD THE RESPONSE TO AN INTERFACE
      for (let i=0; i<response.length; i++){
        this.fruitInterface.push({id: response[i].id, name: response[i].name, selected :  response[i].selected });
       
             }
     console.log("lenght  " +   this.fruitInterface.length);
    })



  }

this.fruitInterface的长度为2，表示已添加值。但我无法阅读:(（我这样做：this.fruitInterface.name ==＆gt;给出错误在数组中说：this.fruitInterface [i] .name ==＆gt;不起作用

请帮助我

Answer 1

您可以将fruites响应分配给您在组件中定义的任何局部变量。从那里它可以用来做任何你想做的事情，只要显示或操纵数据。界面只是确保类型对于响应数据是正确的。

在服务中，您可以根据需要定义响应类型 -

return this.http.get<FruitsType[]>(params)

这将确保响应是FruitsType对象的数组。然后在您调用服务的组件中，您可以简单地将响应分配给变量，并正确地假设它将遵循FruitsType接口。

this.service.getFruit.subscribe(res => {
  this.fruites = res
})

Answer 2

你试过这个吗？

const fruitInterface= jsonArray.map(res => (res.json() as FruitsType));

这将获取从服务返回的每个json对象（现在在数组中），并返回一个FruitTypes数组而不是json对象。从更复杂的问题here。

Answer 3

Iam更新了你的代码，因为我检查了一点点工作。

像这样声明变量

public fruits: FruitsType[] = [];

这是我的方法

public getJSON() {
    this.http.get("assets/file.json")
      .subscribe(response => {                

       //here iam converting response as json
       let temp=response.json();

      //here iam getting fruits data in temp variable
        this.fruits=temp.fruites;
       //printing fruits Array.
        console.log("Fruits",this.fruits);

        //here iam newly added access in typescript file
         for(let fruit of this.fruits){
            console.log("Fruit Name",fruit.name);
         }
         console.log("Fruits access via index--->",this.fruits[0].name);
       })
  }

//这里是我在Html文件中新添加的访问权限

<ul *ngFor="let item of fruits">
  <li>Fruit Name :{{item.name}}</li>
  <li>Id :{{item.id}}</li>
  <li>selected :{{item.selected}}</li>
</ul>

注意： - 水果是任何数组，所以你不能像这样直接访问。 this.fruits.name （错误）。

工作精细iam测试我相信它对解决您的问题很有用。如果有任何错误请告诉我。如果解决了问题，请标记为答案。

还附加了示例输出窗口

Answer 4

以下是我最终得到的结论：

阅读JSON的服务：

＆＃13;

  getJSON (): Observable<FruitsType[]> {
    return this.http.get<FruitsType[]>((this.configUrl))
  }

＆＃13;

或像我这样的新生儿，重新确认你需要将 app.module.ts 中的服务导入为休闲：

＆＃13;

import { ReadJsonService } from './services/read-json.service'

and then add it to the Providers: 

  providers: [AuthService,ReadJsonService],

＆＃13;

这是界面：

＆＃13;

export interface FruitsType {

  id: String;
  name: String;
  selected: String;
}

＆＃13;

您可以使用以下命令创建界面：ng generate interface NameOfTheInterface

这是我如何调用服务和其他服务：

＆＃13;

  ngOnInit() {
    this.jsonService.getJSON().subscribe(response => {


      for (const i of response) {    // this is just to see it works

        console.log('ID - ', i.id);
        console.log('Name - ', i.name);
        console.log('Selected - ', i.selected);
      }

      for (let i=0; i<response.length; i++){
        this.fruitInterface.push({id: response[i].id, name: response[i].name, selected : response[i].selected });
        console.log("response[i].id" + response[i].id);

      }
     
    }

  }

＆＃13;

这是我使用fruites名称的复选框：

＆＃13;

<div >
  <label for="fruits">fruits:</label>
  <div *ngFor="let fruit of fruitInterface">
    <label>
      <input type="checkbox"
             name="fruits"

      >

      {{fruit.name}}
    </label>
  </div>

</div>

＆＃13;

希望它像我一样帮助一些新手：）

将JSON分配给Interface类型的Array

4 个答案: