Вопросы Теги

Отрегулируйте HTML-таблицу так, чтобы содержимое отображалось, Угловое

Я знаю, что это старый вопрос, но я очень горжусь этим решением :) Он обрабатывает номера меньше 1000, но его можно легко расширить, включив в него как можно больший объем, добавив в 2D-код numeralCodes массив. 

var numeralCodes = [["","I","II","III","IV","V","VI","VII","VIII","IX"],         // Ones
                    ["","X","XX","XXX", "XL", "L", "LX", "LXX", "LXXX", "XC"],   // Tens
                    ["","C","CC","CCC","CD","D","DC","DCC","DCCC","CM"]];        // Hundreds

function convert(num) {
  var numeral = "";
  var digits = num.toString().split('').reverse();
  for (var i=0; i < digits.length; i++){
    numeral = numeralCodes[i][parseInt(digits[i])] + numeral;
  }
  return numeral;  
}
<input id="text-input" type="text">
<button id="convert-button" onClick="var n = parseInt(document.getElementById('text-input').value);document.getElementById('text-output').value = convert(n);">Convert!</button>
<input id="text-output" style="display:block" type="text">

0
задан yunzen 4 March 2019 в 08:06
поделиться

2 ответа

Попробуйте 

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

вместо 

<td *ngFor="let cell of row"> {{cell.content[1]}}
0
ответ дан holydragon 4 March 2019 в 08:06
поделиться

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

<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

Примечание

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

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

0
ответ дан yunzen 4 March 2019 в 08:06
поделиться
Другие вопросы по тегам:

Похожие вопросы: