行详细信息内的Ngx数据表材料表单字段

时间:2018-07-18 07:26:22

标签: angular angular-material ngx-datatable

你好,我想在ngx数据表的行详细信息中添加mat表单字段。 正常的输入工作正常,但是使用mat选择会导致我的行无法扩展。 它适用于此:

但是一旦我输入了另一个输入字段,行就不再扩展了。我该如何解决?

<ngx-datatable
    #myTable
    class="material"
    [columnMode]="'flex'"
    [headerHeight]="50"
    [footerHeight]="50"
    [rowHeight]="'auto'"
    [rows]="details"
    [rowClass]="getRowClass"
    [selectionType]="'single'"
    (select)='onSelect($event)'>
    <ngx-datatable-row-detail [rowHeight]="'auto'" #myDetailRow (toggle)="onDetailToggle($event)">
      <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
        <div style="padding-left:35px;" layout="column" layout-wrap>

          <mat-form-field>
            <mat-label>Example</mat-label>
            <input matInput [(ngModel)]="row.Omschrijving" required>
            <mat-error>This field is required</mat-error>
          </mat-form-field>

          <mat-form-field>
            <mat-select placeholder="Favorite food">
              <mat-option *ngFor="let groep of metaData.GevaarGroepen" [value]="groep">
                {{groep.Omschrijving}}
              </mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field>
            <mat-label>Example</mat-label>
            <input matInput [(ngModel)]="row.Volgnummer" required>
            <mat-error>This field is required</mat-error>
          </mat-form-field>

          <!-- IF I ADD THIS OR MORE FORM FIELDS, THE ROWS ARE NOT EXPANDING ANYMORE
             <mat-form-field>
            <mat-label>Example</mat-label>
            <input matInput [(ngModel)]="row.ENa" required>
            <mat-error>This field is required</mat-error>
          </mat-form-field> -->
      </div>
      </ng-template>
    </ngx-datatable-row-detail>

0 个答案:

没有答案