ahmed_sa Ответов: 3

Как запустить Make красной линии до строки имеют различные значения угловой 7 ?

How to run make red line to row have different values on angular 7 ?


код я попробовал на jquery он работает и делает красную линию

Мне нужно выполнить код ниже на angular 7

при загрузке данных на компонент сделайте красную линию в строке, которая имеет разные значения

На самом деле мне нужно применить тот же код, что и на том, что я попробовал ниже на angular 7

после того как я поместил свой код ниже на событие ngoninit

я получаю ошибку

Type 'Set<string>' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators.


Что я уже пробовал:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
  MakeColorForDifferentContent();
});

function MakeColorForDifferentContent (){
  $("table tr").each((_, tr) => {
    var tempValue = $($(tr).find('td:first-child')).text();
    var tds = $(tr).find('td:not(:first-child)');
    
    var isDiff = false;
    tds.each((_, td) => {
      if($(td).text() !== tempValue){
        isDiff = true;
        return true;
      } 
    });
    
    if(isDiff)
     $(tr).css('color', 'red');
  });
}
</script>
</head>
<body>
<table border="1">
<col width="500">
<col width="500">
<col width="500">
<col width="500">
<tr bgcolor="#6699FF" width="100%">
    <th>Part1</th>
    <th>Part2</th>
    <th>Part3</th>
    <th>Part4</th>
<tr>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>12</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>17</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
</table>

</body>
</html>

3 Ответов

Рейтинг:
2

Arthur V. Ratz

Кроме того, моя рекомендация состоит в том, чтобы использовать Angular.js возможность динамического построения таблицы и списка строк в вашем HTML-документе: https://docs.angularjs.org/api/ng/directive/ngRepeat[^]

ahmed_sa

пожалуйста, не могли бы вы помочь мне сделать это на angular 7

Arthur V. Ratz

Сейчас. Позже я опубликую свое решение Angular 7. Просто оставайся настроенным...

Рейтинг:
0

Arthur V. Ratz

У меня есть решение с моей стороны:

Вот ваш код представлен модификация:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
  MakeColorForDifferentContent();
});

function MakeColorForDifferentContent (){
  $("table tr").each((row, tr) => {
    var tempValue = $($(tr).find('td:first-child')).text();
    var tds = $(tr).find('td:not(:first-child)');
    
    tds.each((col, td) => {
      if($(td).text() !== tempValue){
        return true;
      } 
    });
    
    if((row % 2) == 0) {
     $(tr).css('color', 'red'); 
     $(tr).css('background-color', 'lightgrey'); 
    }
  });
}
</script>
</head>
<body>
<table border="1">
<col width="500">
<col width="500">
<col width="500">
<col width="500">
<tr bgcolor="#6699FF" width="100%">
    <th>Part1</th>
    <th>Part2</th>
    <th>Part3</th>
    <th>Part4</th>
<tr>
    <td>12</td>
    <td>12</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>12</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>17</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
<tr>
    <td>17</td>
    <td>15</td>
    <td>12</td>
    <td>12</td>
</tr>
</table>

</body>
</html>


По - видимому, вот для чего предназначен этот код. Когда цикл .each(...) выполняется для каждой строки, он проверяет, является ли значение индекса строки четным или нечетным (например, если деление значения индекса на 2 не дает напоминания). Если это так, то вызывается метод css (...), меняющий атрибуты цвета css на нужный цвет фона и текста, так что строки 0,2,4,6,8... окрашиваются светло-серым фоном и красным текстом.

Код, который вы отправили, не будет работать, потому что он не выполняет проверку того, должен ли быть изменен цвет фона и текста для текущей строки.

Наслаждайтесь! :)

Рейтинг:
0

Arthur V. Ratz

Вот решение с помощью Angular 7:

<h2 [style.color]="'red'">Products</h2>

<table border="0" cellpadding="0">

<div  *ngFor="let product of products; let i = index" [attr.data-index]="i">

  <tr [style.background-color]="(i % 2) ? 'lightgrey': 'white'">
    <td>
      {{ i }}
    </td>
    <td>
      {{ product.name }}
    </td>
  </tr>

</div>

</table>


Создайте новый проект в https://angular.io/generated/live-examples/getting-started-v0/stackblitz.html[^] и замените код в product-list/product-list.component.html с кодом, указанным выше.
https://malrnooedyj.angular.stackblitz.io[^]