Добавить значение из массива в другой массив

Question

Компонент

export class AllUserComponent implements OnInit {
  //Here is saving all users from database
  allUsers: Array<Object>;
  roleName: any[] = []; //here I want roles property from each object from allUsers

  constructor(private userService: UserService) {}

  ngOnInit() {
    //Take from UserService getAll method and subscribe to add all users from database
    this.userService.getAll().subscribe(data => {
      this.allUsers = data.allUsers;
      console.log(this.allUsers)
    });

  }

Сервис

  getAll(): Observable<AllUsers> {
    return this.http.get<AllUsers>(this.url);
  }

Модель

export interface AllUsers{
    allUsers: string[];
}

Я хочу получить роли, которые являются вложенными значениями в каждом объекте массива allUser, добавить его в массив roleName и отобразить в столбце Roles в table в виде HTML.

Answer 1

Давайте сначала изменим этот строковый массив

export interface AllUsers{
    allUsers: User[]; // shouldn't be a string array?!
}

Добавьте пользователя

export interface User {
  id: number;
  firstName: string;
  lastName: string; 
  email: string;
  password: string;
  roles: Role[];
}

И роль

export interface Role {
  id: number;
  name: string
}

Попытайтесь избежать использования подписки, используйте асинхронный каналвместо.Вы можете использовать lodash для обработки ваших массивов.

export class AllUserComponent implements OnInit {
  allUsers$: Observable<User[]>;
  distinctRoles$: Observable<Role[]>;

  constructor(private userService: UserService) {}

  ngOnInit() {
    // Take from UserService getAll method
    this.allUsers$ = this.userService.getAll().pipe(
      map((all: AllUsers) => all.allUsers),
    );

    // map the roles
    this.distinctRoles$ = this.allUsers$.pipe(
      map((allUsers: User[]) => _.flatMap(allUsers, 'roles')), // import * as _ from 'lodash'
      map((allRoles: Role[][]) => _.flatten(allRoles)),
      map((allRoles: Role[]) => _.uniq(allRoles)), // remove the line if you don't want disctinct
    );
  }

И "подписаться" на ваши Observables в вашем шаблоне с помощью асинхронного канала

<div *ngFor="let role of disctictRoles$ | async">

Answer 2

попробуй так:

this.allUsers.forEch(user => {
  user.roleNames.push(user.roles);
})

Answer 3

Как я понял;вам нужно показать роли пользователя помимо его деталей, это правда?

Я думаю, вы используете matTable или, по крайней мере, *ngFor;поэтому вам нужно добавить функцию, чтобы получить соответствующие роли;как:

getRoles(user: Object) {
    return user.roles.reduce((str, role) => {
        // add role name if this is the first role; else add role to string then return it    
        return str? str += ', ' + role.name: role.name;
    }, '');
}

Нет необходимости использовать функцию уменьшения;вы можете использовать временную переменную с обычным циклом;но это более чистый путь.

Тогда из HTML вы можете назвать его в ролях td;как:

<tr *ngFor="let user of allUsers">
    <!-- previous details-->
    <td> {{getRoles(user)}} </td>
</tr>

Подробнее о уменьшение функция.

Answer 4

Попробуйте так:

TS:

this.allUsers.forEach(user => {
  let roleNames = ""
  user.roles.forEach((r, index) => {
    roleNames += r.name

    if (user.roles.length - 1 != index) {
      roleNames += ", "
    }

  })
  Object.assign(user, { "roleNames": roleNames })
})

Шаблон:

<table>
  <tr>
    <th>Id </th>
    <th>Name </th>
    <th>Roles </th>
  </tr>
   <tr *ngFor="let item of allUsers">
    <td>{{item.id}} </td>
    <td>{{item.firstName}} </td>
    <td>{{item.roleNames}} </td>
  </tr>
</table>

Рабочая демонстрация