Как использовать ID для извлечения записи внутри вложенных ngFor Loops в Ioni c / Angular?

Question

В моем приложении Ioni c / 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, Я хотел бы использовать этот идентификатор для поиска моих loadedUsers и отображения имени, связанного с этим идентификатором.

Например, для беседы C1 задан UserId = abc1. Я хотел бы использовать этот идентификатор пользователя для поиска моих пользователей и отображения их имени.

Вот код в Службе бесед:

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');
        ]
    }
}

Дополнительно эта служба должна предоставлять метод для возврата имени пользователя / имени пользователя для предоставленного идентификатора пользователя. Например, вот так:

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

Здесь вы проверяете, выполняет ли какой-либо пользователь условие наличия идентификатора пользователя, равного указанному. Фильтр может вернуть несколько совпадений, для чего возьмите первый. В вашем примере фильтр должен возвращать только одно совпадение, однако, как указано, тип возвращаемого значения этого метода - массив.

Наконец, в вашем компоненте вы можете вызвать этот метод и получить имя пользователя.

Сначала введите 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>

В качестве альтернативы, вы можете сопоставить значения в элементе dialogArray с иметь userNames вместо userIds:

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

Вы отображаете каждый диалог на новый объект, который содержит те же поля (обратите внимание на оператор распространения (три точки ...)) скопировать все поля в новый объект) и настраивает userId, заменяя фактический userId на userName.

Однако это нарушит вашу логическую структуру объекта диалога, поскольку ваш userId теперь фактически является userName. Может быть только временным обходным путем; -)