Привязка таблицы PrimeNG к двумерному массиву - PullRequest
Новая
       14

Привязка таблицы PrimeNG к двумерному массиву

0 голосов
/ 11 июня 2019

Мне нужно динамически сгенерировать источник данных для моей таблицы PrimeNG, потому что я не знаю, сколько у меня будет столбцов, или даже, какой будет заголовок для каждого столбца. Мне нужно, чтобы таблица была редактируемой с двухсторонней привязкой данных. Я пытаюсь использовать двумерный массив для хранения данных (gridData: number [] []) и динамически создавать список столбцов как {index: 0, header: "col1"} и т. Д. Отображается сетка правильно с правильными начальными значениями, но изменения не записываются обратно в сетку. Документация PrimeNG гласит, что директива [editablecolumnfield] для элемента должна называть «поле», но эти записи не имеют имен полей, только индексы, потому что таблица данных - это не массив объектов с членами, а массив массивов с индексов. Возможно ли даже двухстороннее связывание данных с двухмерным массивом?

Я новичок в разработке Angular и PrimeNG, поэтому, если я все делаю неправильно, пожалуйста, укажите мне правильное направление. 

  <p-table [columns]="gridCols" [value]="gridData"> 
    <ng-template pTemplate="header" let-gridCols>
      <tr>
        <th *ngFor="let col of gridCols">
          {{col.header}}
        </th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-gridRow let-columns="gridCols">
      <tr>
        <td *ngFor="let col of gridCols" [pEditableColumn]="gridRow" [pEditableColumnField]="col.index">
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input type="number" ([ngModel])="gridRow[col.index]" /> 
            </ng-template>
            <ng-template pTemplate="output">
              {{gridRow[col.index]}}
            </ng-template>
          </p-cellEditor>
        </td>>
      </tr>
    </ng-template>
  </p-table>
...