如何使用ID在Ionic/Angular中的嵌套ngFor循环中检索记录

Question

在我的Ionic/Angular应用程序中，我试图在Conversation_list页面上显示用户之间的对话列表。

以下是型号：

对话模型：

import { Message } from './message.model';
export class Conversation {
constructor(
public id: string,
public userId: string,
public mechanicId: string,
public messages: Message[],
) { }
}

消息模型：

export class Message {
constructor(
public id: string,
public text: string,
public userId: string,
public timestamp: string
) { }
}

用户模型：

export class User{
constructor(
public id: string,
public name: string,
public userType: string
) { }
}

目前，我可以在下面的loadedConversations变量中显示存储的数据。

然而，我不想显示userId，而是想使用该ID来搜索我的loadedUsers，&显示与该ID相关联的名称。

例如，会话C1的UserId为abc1。我想使用这个UserId来搜索我的用户，&显示其名称。

这是对话服务中的代码：

private _conversations: Conversation[] = [
new Conversation(
'c1',
'abc1',
'def2',
[
new Message('mess1', 'Test message', 'abc1', '01/01/2020'),
new Message('mess2', 'Another message', 'def2', '02/01/2020')
]
),
new Conversation(
'c2',
'xuz1',
'ghi2',
[
new Message('mess1', 'my  message', 'xuz1', '05/03/2020'),
new Message('mess2', 'more messages', 'ghi2', '08/03/2020')
]
)
];
get conversations() {
return [...this._conversations];
}

这是Conversation_List TS:

export class ConversationListPage implements OnInit {
loadedConversations: Conversation[];
constructor(private conversationsService: ConversationsService) { }
ngOnInit() {
this.loadedConversations = this.conversationsService.conversations;
}
}

Conversation_List HTML:

<ion-item *ngFor="let conversation of loadedConversations">
<ion-label>
<h2>USER ID: {{ conversation.userId}}</h2>
<p>MECHANIC ID: {{ conversation.mechanicId }}</p>
<p>MESSAGES: {{ conversation.messages }}</p>
</ion-label>
</ion-item>

关于什么是最好的方法有什么想法吗？

Answer 1

您需要首先创建和存储用户，然后才能引用这些用户。这类似于数据库中的主键和外键。您当前的代码将userId添加为一个简单字符串，并且不检查该userId是否真的存在。

我建议您创建一个包含用户阵列的用户服务：

@Injectable({
providedIn: 'root'
})
export class UserService() {
users: User[];

constructor() {
this.users = [
new User('abc123', 'Peter', 'myUserType');
]
}
}

此外，该服务应该提供一个方法，为所提供的userId返回用户/用户名。例如：

getUserNameByUserId(userId: string): User {
return this.users.filter(user => user.userId === userId)[0].name;
}

您在这里要做的是检查是否有用户满足了userId等于所提供的userId的条件。过滤器可以返回多个匹配项，因此取第一个匹配项。在您的示例过滤器中，应该只返回一个匹配项，但是，如前所述，该方法的返回类型是数组。

最后，在您的组件中，您可以调用该方法并获取用户名。

首先注入userService:

constructor(protected userService: UserService){}

然后在您的模板中调用您的新方法来获取userName。

<ion-item *ngFor="let conversation of loadedConversations">
<ion-label>
<h2>USER ID: {{ userService.getUserNameByUserId(userId) }}</h2>
<p>MECHANIC ID: {{ conversation.mechanicId }}</p>
<p>MESSAGES: {{ conversation.messages }}</p>
</ion-label>
</ion-item>

或者，您可以将conversationArray中的值映射为userNames而不是userIds:

ngOnInit() {
this.loadedConversations = this.conversationsService.conversations.map(
conversation => {
...conversation,
userId: this.userService.getUserNameByUserId(conversation.userId)
}
);
}

您将每个对话映射到一个新对象，该对象包含相同的字段(请注意排列运算符(三个点…((，以将所有字段复制到新对象中(，并通过将实际userId替换为userName来调整userId。

然而，这将违反会话对象的逻辑结构，因为您的userId现在实际上是userName。可能只是一个临时的解决办法；-(