Получить недвижимость на карте Angular

Question

Как я могу получить свойство с карты и отобразить его в таблице с Angular? Когда я показываю, я получаю [объект Object]. Если использовать property.first, я ничего не получу.

//model

export interface UserModel { 
       room: Map<number,number> 
}


//service

export class UserService {
  user: UserModel;

  newUser: UserModel = {
    room: new Map<number,number>(),
....}}


//html
 <tbody>
      <tr *ngFor="let user of $users | async">
        <td>{{user.room}}</td> // user.room.first???
      </tr>
      
 </tbody>

Помогите, пожалуйста!

Answer 1

Чтобы получить доступ к карте в шаблоне angular, вы должны преобразовать ее в массив или объект.

getArray(map){
  return Array.from(map.keys());
}

Затем получить доступ к ней из шаблона angular.

  <tr *ngFor="let element of getArray(map)">
     <!-- element[0] is key && element[1] is value -->
    <td>{{element[0] - element[1]}}</td>
  </tr>

Вы можете оптимизировать сохраните его в переменной, как показано ниже.

public mapArray;
public map;

constructor() {
  this.map = new Map();
  this.mapArray = [];
}

public ngOnInit() {
  this.doSomeThing();
  this.convertMapToArray();
}

private doSomeThing(){
  this.map.set('my_key_1', 'my_value_1');
  this.map.set('my_key_2', 'my_value_2');
}

private convertMapToArray(){
  this.mapArray = Array.from(this.map.keys());
}

<tr *ngFor="let element of mapArray">
  <!-- element[0] is key && element[1] is value -->
  <td>{{element[0] - element[1]}}</td>
</tr>

Answer 2

Ваша концепция * ngFor здесь неверна. Если вы хотите использовать * ngFor, это в основном для итерации массива. Итак, вам нужно использовать массив , вы не можете использовать Map в * ngFor.

И если ваш тип данных - Map, вы должны преобразовать его в массив.

Если вы хотите получить более подробное решение по этому вопросу, укажите желаемый конечный результат.

Насколько я понимаю, вы хотите распечатать значение, сопоставленное с ключами в таблице.

Итак, вы необходимо преобразовать ключи карты в массив. Для этого используйте:

this.keys = Object.keys(this.user)

Добавьте эту строку в свой файл .ts, а теперь добавьте следующий код в html.

<tbody>
  <tr *ngFor="let keyof keys| async">
    <td>{{user[key]}}</td> // user.room.first???
  </tr>

Надеюсь, это ваше требование. и вы можете это сделать.