来自套接字io的数据未在视图中全部显示

时间:2019-03-22 12:22:03

标签: angular nativescript

我每10秒从套接字io这个JSON中获取数据。

data { "nr": "1" }
data { "nr": "2" }
.
.
.
.
data { "nr": "5555" }

我在ts中具有此功能:

....
mydata:any;

constructor(private zone:NgZone) {
  super()
}

....
socketIO.on('hello', (data) => { 
  this.zone.run(()=> {
    console.log('data', data);
    this.mydata= data;
  }); 
});

在HTML Nativescript中:

<StackLayout>
  <Label text={{mydata}}></Label><br/>
</StackLayout>

现在,问题在视图中,我想在视图中打印所有数据1、2、3、4,...,5555

不仅是5555点的终点

有什么想法请打印所有数据吗?

1 个答案:

答案 0 :(得分:0)

您必须将mydata转换为数组。

HTML

<StackLayout >
        <!-- json pipe just neatly outputs the data -->
        <Label text={{ mydata | json }}></Label>
       <!-- Or to list items one by one --->
       <Label *ngFor="let label of mydata; let i = index" text={{ label.nr }}> 
       </Label>
</StackLayout>

TS     ....

mydata:any = [];

constructor(private zone:NgZone) {
    super()
}

    ....
    socketIO.on('hello', (data) => { 
        this.zone.run(()=> {
           console.log('data', data);
           this.mydata.push(data);
        }); 
    });

注意<br>标记在{N}环境中无效