Angular Таблица строк и столбцов на основе машинописного объекта данных - PullRequest
Новая
       4

Angular Таблица строк и столбцов на основе машинописного объекта данных

0 голосов
/ 16 апреля 2020

ow

Stackblitz Демонстрация кода Вы можете редактировать для справки.

Как показано на рисунке выше, таблица генерируется с использованием данные Dynamica, поступающие из файла данных объекта класса. и основанный на значении объекта данных row-span и col-span в таблице классов, сгенерированной с этими настройками. Я сделал col-span таблицы, основываясь на настройках объекта данных.

Мой вопрос таков: посмотрите на второй строке, и столбец Thursday31 начинает col-span на три, что составляет Thrusday Friday and Saturday col-span , после того, как закончены col-span, остается sunday. Но ngFor начинается с того места, где нарушается условие, и отображаются оставшиеся дополнительные данные, равные Friday saturday Sunday. Я хочу отображать только оставшееся значение только после того, как будет выполнен col-span, значит результат должен быть only sunday после col-span с thrusday31.

машинопись data.ts 

  weeks = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Firday', 'Saturday', 'Sunday'];

 mySentences = [
   {"Id":"abc","Name":"Cus1","day":2,"begin":3,"total":2},
   {"Id":"bcf","Name":"Cus2","day":4,"begin":2,"total":3},
   {"Id":"uuu","Name":"Cus3","day":7,"begin":5,"total":4}, 
 ].sort((a,b) => a.begin < b.begin ? -1 : 1 );

В `mySentences ... 

begin = starts form row,
day = starts from column,
total = col-span value.

HTML is 

 <div class="col-md-12" >
    <table class="table table-bordered table-dark table-hover hidder" id="report">
        <!-- Header -->
        <tr>
            <td style="width: 10%;"></td>
            <th style="width: 10%;">Monday</th>
            <th style="width: 10%;">Tuesday</th>
            <th style="width: 10%;">Wednesday</th>
            <th style="width: 10%;">Thursday</th>
            <th style="width: 10%;">Friday</th>
            <th style="width: 10%;">Satuday</th>
            <th style="width: 10%;">Sunday</th>
        </tr>
          <ng-container *ngFor="let item of [1,2,3,4,5,6,7]; let i = index;">
        <tr>
          <td> {{item}} </td>
        <ng-container *ngFor="let week of weeks; let j = index">

          <ng-container *ngFor="let sm of mySentences">

            <ng-container *ngIf="sm.begin === i+1 ; ">


            <td *ngIf="sm.day === j+1; else weekDay"  [attr.colspan]= "sm.total" >
               {{week + j+1 }}
            </td>
            </ng-container>
              <ng-template #weekDay>
              <td>  {{week}} </td>
              </ng-template>       
            </ng-container>
            </ng-container>
          </tr>

     <ng-template #elseTmp>
       <td style="width: 10%;">row: {{i+1}}</td>
            <td style="width: 10%;">col: 2</td>
            <td style="width: 10%;">col: 3</td>
            <td style="width: 10%;">col: 4</td>
            <td  style="width: 10%;">col: 5</td>
            <td style="width: 10%;">col: 6</td>
            <td style="width: 10%;">col: 7</td>
            <td style="width: 10%;">col: 8</td>
     </ng-template>

</ng-container>
    </table>
</div>

А также, оставшийся ряд отображается нормально, оставшийся означает, что нет в mySentence массиве объектов.

1 Ответ

1 голос
/ 16 апреля 2020

Вам не нужна дополнительная итерация через mySentences. Вам нужен метод, который возвращает, отображать или нет элемент <td> на основе индекса текущей строки (i) и текущей недели (j). Т.е. не отображать <td>, когда текущий индекс находится между началом и концом диапазона в одной строке.

Примерно так, например: 

public showDay(begin: number, day: number) {
  return !this.mySentences.some(
    m => m.begin === begin && day > m.day && day <= m.day + m.total - 1
  );
}

I ' мы пытались изменить ваш пример Stackblitz: https://stackblitz.com/edit/angular-yfsrc1

(Имейте в виду, что я сделал некоторые предположения относительно того, какие данные вы хотите отобразить в ячейках)

...