在 HTML 中显示 JSON 格式列表时出错，无法显示

Question

我在html文件中显示json格式的数据时遇到了一些问题。它工作成功，但不显示列表。这在我的代码中...

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Hotspot, Network } from 'ionic-native';

@Component({
   selector: 'page-home',
   templateUrl: 'home.html'
})
export class HomePage {
 constructor(public platform: Platform){
   this.platform = platform
 }
   List(){
       Hotspot.scanWifi().then((networks:Array<Network>)=>{
       console.log(networks);
    });
  }
}  

这是我的 HTML 文件

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button ion-button color="Primary" (click)="List()">ScanWifi</button>
  <div *ngFor="let network of networks">
  <ion-list>
    <ion-item>
       <h2>{{network}}</h2><br>
    </ion-item>
  </ion-list>
  </div>
</ion-content>  

Answer 1

你只是在控制台记录你的结果，你当前的代码：

List(){
  Hotspot.scanWifi().then((networks:Array<Network>)=>{
  console.log(networks);
});

您需要声明一个局部变量networks以便您可以在视图中使用它，就像您一样：

所以你的代码应该看起来像这样：

networks;
List(){
  Hotspot.scanWifi().then((networks:Array<Network>)=>{
  this.networks = networks;
});

以便您可以在视图中引用您的网络：

<div *ngFor="let network of networks">

编辑：我首先错误地"假设"Hotspot需要注入到构造函数中，但通过做一些研究，我发现 Hotspot 是一个带有方法的本机元素，因此可以通过Hotspot.scanWifi()调用，如下所示。

Answer 2

您必须在类中设置网络数组

export class HomePage {
networks:any;
 constructor(public platform: Platform){
   this.platform = platform
 }
   List(){
       Hotspot.scanWifi().then((networks:Array<Network>)=>{
       console.log(networks);
       this.networks = networks;//or do forEach and push
    });
  }
}