Таблица ngStyle на основе значений массивов

Я хочу получить такую таблицу:

у меня 2 объекта

  users = [
    { name: 'john', age: '22' },
    { name: 'mike', age: '20' },
    { name: 'dan', age: '12' },
    { name: 'anne', age: '16' },
    { name: 'jenny', age: '42' },
  ]

  names = [
    { name: 'john', color: 'black' },
    { name: 'mike', color: 'black' },
    { name: 'dan', color: 'red' },
    { name: 'anne', color: 'red' },
    { name: 'jenny', color: 'red' },
  ]

Если имя из names находится в users, я хочу, чтобы его цвет внутри таблицы был black, если нет, я хочу, чтобы это был red.

Это мой html:

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor = "let user of users">
            <ng-container *ngFor = "let x of names">
                <ng-container *ngIf = "x.name == user.name">
                    <td [ngStyle] = "{ 'color': names.color }">{{ user.name }}</td>
                    <td [ngStyle] = "{ 'color': names.color }">{{ user.age }}</td>
                </ng-container>
            </ng-container>
        </tr>
    </tbody>
</table>

Но он не работает должным образом. Вы можете увидеть рабочий фрагмент здесь

Как я могу достичь того, чего хочу? Спасибо за уделенное время!

html angular angular6

17.01.2019 12:13

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У вас опечатка при ссылке на color. color является свойством объекта, а не массива, через который вы проходите:

<td [ngStyle] = "{ 'color': names.color }">{{ user.name }}</td>
<td [ngStyle] = "{ 'color': names.color }">{{ user.age }}</td>

Должно быть

<td [ngStyle] = "{ 'color': x.color }">{{ user.name }}</td>
<td [ngStyle] = "{ 'color': x.color }">{{ user.age }}</td>

17.01.2019 12:16

Ответ принят как подходящий

Вы можете либо создать метод, который извлекает цвет на основе имени (которое вы указали в своем компоненте).

getColor(name) {
  return this.names.find(e => e.name === name).color;
}

и позвони с

<td [style.color] = "getColor(user.name)">{{ user.name }}</td>
<td [style.color] = "getColor(user.name)">{{ user.age }}</td>

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

Лучше сначала объединить два массива и использовать это

combined = [];


constructor() {
  this.combined = this.users.map(e => Object.assign(e, this.names.find(x => x.name === e.name)))
}

использование

    <tr *ngFor = "let user of combined">        
        <td [style.color] = "user.color">{{ user.name }}</td>
        <td [style.color] = "user.color">{{ user.age }}</td>
    </tr>

Я выбрал первый путь. Мне также пришлось добавить if (this.names.find(e => e.name === name) != undefined) { return ... }, потому что у меня были некоторые ошибки в консоли. Спасибо.

— 17.01.2019 13:30

17.01.2019 12:20