Question

我从套接字io获取数据，但是在视图中没有显示。

我在ts中具有此功能：

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

控制台中的数据显示如下：

数据{ “ nr”：“ 123456789456” }

在htm本机脚本中：

<StackLayout >
        <Label [text]='mydata'></Label>
</StackLayout>

如何显示我的数据？在控制台数据中正确显示

Answer 1

您可以像这样使用绑定-


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

让我知道它是否有效。

进一步阅读read docs here

Answer 2

您可以这样尝试

TS：

    mydata: any;
    const self = this;
    socketIO.on('hello', (data) => { 
        console.log('data', data);
        self.mydata= data; 
    });

HTML：

    <StackLayout>
       <Label [text]='mydata'></Label>
    </StackLayout>

让我知道它是否有效

Answer 3

从控制台的输出中，我看到data是一个对象。 [text]上的<Label>输入不应该是字符串吗？

Answer 4

确保您在ngZone内运行

....

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

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

Answer 5

分配后，您可能必须触发更改检测 https://angular.io/api/core/ChangeDetectorRef#markforcheck

class componant {
  constructor(private cdf:ChangeDetectorRef){}

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

}

套接字中的数据不在视图中显示

5 个答案: