如何在文本中显示从Typescript到Html的数据列表？

我正在从控制台日志中获取所需的值列表，但我不知道如何在视图中输出它。谁能帮帮我吗

这是我的打字脚本文件：

 customFunction(val: any) {
    this.modifiedText = val + " was selected from the dropdown";
    let id = val;
    this.pokeService.getGenerationSpecies(id).subscribe((details) => {
      this.species = Object.values(details);
      this.pokemonSpecies = Object.values(this.species[6]);
      let iterator = this.pokemonSpecies.values();
      for (let elements of iterator) {
        console.log("result:", elements.name);
      }
    });
  }

我想在这里输出elements.name结果：

  <ion-item>
      <ion-label [(ngModel)]="customFunction"><b>{{elements.name}}</b></ion-label
      >
    </ion-item>

---

有人能告诉我正确的路吗。非常感谢

您需要使用

*ngFor

遍历列表

元素.name

中的每个项目，因为您提到了这是一个列表。在这种情况下，现在发生的是，你得到了整个列表，并试图立即打印出来

可能看起来像这样（尚未测试）：

{{name}}

尝试以下操作：

<ion-item *ngFor="let element of pokemonSpecies.values()">
  <!-- depending on what you went to send to your customFunction, change the parameter -->
  <ion-label [(ngModel)]="customFunction(element)"><b>{{element.name}}</b></ion-label
  >
</ion-item>

{{element.name}
中的您的.component.ts
：

    export class YourComponent implements OnInit {
    
      elements: any;
    
      constructor(
      ) { }
    
      ngOnInit(): void {
      }
    
      customFunction(val: any) {
        this.modifiedText = val + " was selected from the dropdown";
        let id = val;
        this.pokeService.getGenerationSpecies(id).subscribe((details) => {
        this.species = Object.values(details);
        this.pokemonSpecies = Object.values(this.species[6]);
        this.elements = this.pokemonSpecies.values();
      });
    }
    
}

在
your.component.html
中：

<div *ngFor="let item of elements, let i=index">
    <ion-item>
      <ion-label><b>{{item.name}}</b></ion-label
      >
    </ion-item>
</div>

你好，谢谢你的帮助。这段代码对我来说很有用，但我得到了一个控制台日志错误循环，说“没有值访问器用于具有未指定名称属性的表单控件”，然后我的应用程序在浏览器中运行几分钟后崩溃@若昂o@Xev这与您的表单有关，请在此处查看：或编辑您的问题，以包含有关您的HTML和component.ts文件的更多信息。感谢您的帮助，但即使在控制台中登录，我也无法获取任何数据。因此，您无法从
this.pokeService.getGenerationSpecies（id）中的详细信息中获取任何数据。订阅（（详细信息）=>{ ... })
对吗？如果您无法从呼叫服务中获取任何数据，您需要提供您在问题中呼叫的服务组件，以便我们可以帮助您是的，我很难从我的服务中访问该属性，这就是为什么我刚刚尝试从我的自定义功能中获取它。顺便说一句，服务组件已经添加到我的帖子中。谢谢s
    export class YourComponent implements OnInit {
    
      elements: any;
    
      constructor(
      ) { }
    
      ngOnInit(): void {
      }
    
      customFunction(val: any) {
        this.modifiedText = val + " was selected from the dropdown";
        let id = val;
        this.pokeService.getGenerationSpecies(id).subscribe((details) => {
        this.species = Object.values(details);
        this.pokemonSpecies = Object.values(this.species[6]);
        this.elements = this.pokemonSpecies.values();
      });
    }
    
}

<div *ngFor="let item of elements, let i=index">
    <ion-item>
      <ion-label><b>{{item.name}}</b></ion-label
      >
    </ion-item>
</div>

getGenerationSpecies(index): Observable<any> {
    return this.http.get(`${this.baseUrl}/generation/${index}?limit=25`).pipe(
      map((species) => {
        let pokemonSpecies = Object.keys(species);
        species["id"] = pokemonSpecies.filter((id) => id);
        console.log("species:", species);
        return species;
      })
    );
  }