Настройте HTML-таблицу с содержимым, которое хотите отобразить, Angular

Моя страница посвящена отображению таблицы данных от пользователя на индикаторе смены.

Моя панель инструментов.component.html

<table class = "table">
      <thead>
       <tr>
       <th *ngFor = "let col of tablePresetColumns">
       {{col.content}}
       </th>
       <th></th>
       <th></th>
       </tr>
      </thead>
      <tbody>
       <tr *ngFor = "let row of tablePresetData ">
       <td *ngFor = "let cell of row"> {{cell.content}}</td>
     <td *ngFor = "let cell of row"> 
      <span class  = "dot" [ngClass] = "{
       'dot-yellow' : cell.content == 'Busy',
       'dot-green' : cell.content == 'Idle',
       'dot-red' : cell.content == 'Overload'}">
       </span>
     </td>
       </tr>
      </tbody>
  </table>

Данные моего примера:

  tablePresetColumns = [{ id: 1, content: "Username" }];
  tablePresetData = [
    [{ id: 1, content: "Adiet Adiet" }, { id: 2, content: "Idle" }],
    [{ id: 1, content: "Andri Irawan" }, { id: 2, content: "Idle" }],
    [{ id: 1, content: "Ari Prabudi" }, { id: 2, content: "Idle" }]
  ];

Как мне сделать, чтобы:

removes the status in the page that I want to display, so it just appear username and color indicator

Я попытался изменить *ngFor на это (с индексом 1):

<td *ngFor = "let cell of row"> {{cell.content[1]}}

но это вообще не работало Настройте HTML-таблицу с содержимым, которое хотите отобразить, Angular

javascript html css arrays angular

04.03.2019 08:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

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

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

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

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

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

128

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

Ответы 3

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

Пытаться

<td> {{row[0].content}}</td>

вместо

<td *ngFor = "let cell of row"> {{cell.content[1]}}

04.03.2019 08:59

Как насчет этого

<table class = "table">
  <thead>
    <tr>
      <th *ngFor = "let col of tablePresetColumns">{{col.content}}</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor = "let row of tablePresetData">
      <ng-container *ngFor = "let cell of row, let i = index">
        <td *ngIf = "i == 0">{{cell.content}}</td>
        <td *ngIf = "i == 0">
          <span
            [ngClass] = "{
        'dot-yellow' : row[1].content == 'Busy',
        'dot-green' : row[1].content == 'Idle',
        'dot-red' : row[1].content == 'Overload'}"
          >
          </span>
        </td>
      </ng-container>
    </tr>
  </tbody>
</table>

См. здесь живой пример: https://codesandbox.io/s/7y2r69992j

Примечание

Я думаю, что ваша структура данных является неудобной и не семантической. Было бы лучше, если бы ваши данные выглядели так:

tablePresetColumns = ["Username", "Status"];
tablePresetData = [
  {username: "Adiet Adiet", status: "Idle"},
  {username: "Andri Irawan", status: "Busy" },
  {username: "Ari Prabudi", status: "Overload" }
];

Таким образом, вы могли бы показать таблицу, как это

<table class = "table">
  <thead>
    <tr>
      <th *ngFor = "let col of tablePresetColumns">{{col}}</th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor = "let row of tablePresetData">
      <td>{{ row.username }}</td>
      <td>
        <span [ngClass] = "{
          'dot-yellow' : row.status == 'Busy',
          'dot-green' : row.status == 'Idle',
          'dot-red' : row.status == 'Overload'
        }">
        </span>
      </td>
    </tr>
  </tbody>
</table>

Гораздо легче читать и поддерживать.

Также живой пример: https://codesandbox.io/s/o27pv052z

04.03.2019 09:34

Вам нужно использовать .map для tablePresetData и внести некоторые изменения в структуру объекта.

угловой код здесь:

tablePresetColumns: any = [
    {thTitle:"id", thWidth:'30px'}, 
    {thTitle:"Username", thWidth:'160px'},
    {thTitle:"Status", thWidth:'100px'},
    {thTitle:"", thWidth:'60px'}
];
tablePresetData: any = [
    { id: 1, Username: "Adiet Adiet", status: "Idle" },
    { id: 2, Username: "Andri Irawan", status: "Overload" },
    { id: 3, Username: "Ari Prabudi", status: "Busy" }
];

constructor() {}
ngOnInit() {

    this.tablePresetData.map((item: any) => {
        if (item.status === "Busy") {
        item["className"] = "dot-yellow";
        }
        if (item.status === "Idle") {
        item["className"] = "dot-green";
        }
        if (item.status === "Overload") {
        item["className"] = "dot-red";
        }
    });

    console.info("this.tablePresetData", this.tablePresetData);
}

HTML-код

<table>
    <thead>
        <tr>
            <th 
            *ngFor = "let tableHd of tablePresetColumns" 
            [width] = "tableHd.thWidth" >
                {{tableHd.thTitle}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor = "let tableCol of tablePresetData">
            <td>{{tableCol.id}}</td>
            <td>{{tableCol.Username}}</td>
            <td>{{tableCol.status}}</td>
            <td>
                <span [ngClass]='tableCol.className' class = "circle"></span>
            </td>
        </tr>
    </tbody>
</table>

CSS-класс —

.circle{border-radius: 10px; display: inline-block; height: 10px; width: 10px; }
.dot-yellow{background-color: yellow;}
.dot-green{background-color:green;}
.dot-red{background-color:red;}

23.09.2021 10:10