在我的 li 标签中显示数据，我在控制台中获取数据答案

【问题标题】：display the data in my li tag, I am getting the data in my console在我的 li 标签中显示数据，我在控制台中获取数据
【发布时间】：2019-01-19 01:27:43
【问题描述】：

我正在尝试在浏览器中显示数据
当我点击 api 调用时，我在控制台中获取数据。
但是如何在我的 li 标签中显示数据。
在下面提供我的相关代码和要点中的完整代码

https://gist.github.com/niniyzni/2773b28246ae629dd83b8d6aa5e57185 https://gist.github.com/niniyzni/00ed267c0cd3b97e78fd90791e54ec51

myFunc() {
    console.log("function called");

    // this.navItems = this.http.get("../res/data.json");
    // console.log("this.navItems--->", this.navItems);

    this.http
      .get(
        "https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all"
      )
      .subscribe(data => {
        console.log("data-------->", data);

        let result = data;
      });
  }


<div *ngFor="let r of result">
        <p>{{r.id}}</p>

    </div>

    <ul>
        <li *ngFor="let r of result">
            <input type="text" name="food-name" [(ngModel)]="r.id">
            </li>
    </ul>

【问题讨论】：

目前，您的result 变量只能从该subscribe 函数中访问。而不是let result = data，您应该使用this.result = data。只要result 是一个数组，它就可以工作
下面我的回答解决了你的问题吗？任何反馈将不胜感激

标签： javascript html angular angular2-template angular6

【解决方案1】：

将let result = data; 更改为this.result = data;

myFunc() {
    console.log("function called");

    this.http
      .get(
        "..." // url
      )
      .subscribe(data => {
        console.log("data--->", data);
        this.result = data;
      });
  }

let 声明一个块作用域局部变量来访问你的类的属性 this 所以this.result 你如何访问你在模板中声明和使用的result ngFor。

【讨论】：

【解决方案2】：

myFunc() {
    ------> result : any
    console.log("function called");
    this.http
      .get(
        "https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all"
      )
      .subscribe(data => {
        console.log("data-------->", data);
        -----> this.result = data;
      });
  }

【讨论】：

【解决方案3】：

您可以尝试这样做（使用async 管道并映射您的结果）：

import { share, map, tap } from 'rxjs/operators';
import { Observable } from 'rxjs';

...

result$: Observable<Array<any>>;
...
myFunc() {
  console.log("function called");

  const url = 'https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all';
  this.result$ = this.http.get(url).pipe(
    tap(_ => console.log('CHECK IF RESPONSE IS SHARED')), 
    map(resp => resp.RestResponse.result), 
    share()
  );
}

您的 HTML：

<div *ngFor="let r of result$ | async">
  <p>{{r.id}}</p>
</div>

<ul>
  <li *ngFor="let r of result$ | async">
    <input type="text" name="food-name" [(ngModel)]="r.id">
  </li>
</ul>

STACKBLITZ

【讨论】：

【解决方案4】：

结果在myFunc 中声明和定义。那么你可以尝试设置一个全局变量吗

export class AppComponent {
  title = "Angular Coding Exercise 6";

  constructor(private appService: AppService, private http: Http) {}

  navItems: any;
  result: any;
  myFunc() {
    console.log("function called");

    // this.navItems = this.http.get("../res/data.json");
    // console.log("this.navItems--->", this.navItems);

    this.http
      .get(
        "https://cors-anywhere.herokuapp.com/http://services.groupkt.com/state/get/USA/all"
      )
      .subscribe(data => {
        console.log("data-------->", data);

        this.result = data;
      });
  }


}

【讨论】：