将JSON字符串适配到前端的Angular类

Question

我不明白在Angular中如何使用每个事件的构造函数将数据分解为键值对。

这是我的代码：

messageFromSocket: keywordList[] = [];
wsSubscription: Subscription;
status;
constructor(public webSocketService: WebSocketService) {
this.wsSubscription = this.webSocketService.createObservableSocket('ws://localhost:3000')
.subscribe(
messages => this.messageFromSocket.push(
messages
),
err => console.log('err'),
() => console.log('The observable stream is complete')
)
}

这是我的component.ts减去一些东西。从本质上讲，我现在让它工作的方式是，当一个websocket事件出现时，它会自动推送到这个messageFromSocketkeywordList数组。

KeywordList数组实际上是另一个文件中它自己的类，里面有一个构造函数

name: string;
keyword: string;
constructor(name: string, keyword: string) { 
this.name = name;
this.keyword = keyword;
}
} 

它显示在前端，但作为它自己的大型阵列。

<ng-container class="keywordBox" *ngFor='let message of messageFromSocket'>
<li>
{{ message }}
</li>
</ng-container>

我似乎无法理解如何处理来自websocket的字符串数据，以创建一个名称和关键字的键值对(两者每次都由websocket发送(，然后像许多示例中那样在前端显示。我希望这样，这样我就可以更好地通过应用程序处理数据。

例如，现在它看起来像：

['George: Hello']
or
['George: Hello', 'Raul: World']

我想使用KeywordList类来分解它们。

此外，如果你知道如何在动态内容的第一个项目中添加填充，你能帮助我吗？因为我觉得我已经尝试了Angular的所有CSS技巧，但我仍然缺少一些东西。

Answer 1

尝试以下更改：

export class KeywordList {  
constructor(public name: string, public keyword: string) {}
} 

---

constructor(public webSocketService: WebSocketService) {
this.wsSubscription = this.webSocketService.createObservableSocket('ws://localhost:3000')
.subscribe(
messages => {
messages.forEach(
(message)=> {
const arrayMessage = message.split(':');
const name = arrayMessage[0];
const keyword = arrayMessage[1].trim();
const keywordList: KeywordList = new KeywordList(name,keyword);

this.messageFromSocket.push(keywordList);
}),      
err => console.log('err'),
() => console.log('The observable stream is complete')
);
}