angular - mat tablo satırının altına bileşen eklemek yalnızca tek bir sütuna ekler

Bileşenin tüm satır boyunca yerleştirilmesini bekliyordum. Bunun yerine, bileşen yeni satırın ilk sütununa yerleştirilmiş gibi görünüyor.

İşte Angular 9'da tekrarlanabilir bir örnek: https://stackblitz.com/edit/angular-ithddx Bu sorunu başlangıçta Angular 8'de @angular/material 8.2.3 kullanırken yaşadım.

İlk satıra tıklamak bileşeni ekler, ancak oluşturulan tüm yeni satırı kullanmak yerine ilk sütunu genişletir.

app.component.html:

<div class="example-container mat-elevation-z8">
  <table mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <th mat-header-cell *matHeaderCellDef> No. </th>
      <td mat-cell *matCellDef="let element"> {{element.position}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <th mat-header-cell *matHeaderCellDef> Weight </th>
      <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <th mat-header-cell *matHeaderCellDef> Symbol </th>
      <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns; let index = index" 
      (click)="insertComponent(index)"
      #tableRow>
    </tr>
  </table>
</div>

app.component.ts:

    import {Component, ViewChildren, ViewContainerRef, ComponentFactoryResolver, ComponentFactory, Input} from '@angular/core';
    import {MatTableDataSource} from '@angular/material/table';

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      displayedColumns = ['position', 'name', 'weight', 'symbol'];
      dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);

      @ViewChildren('tableRow', { read: ViewContainerRef }) rowContainers;
      expandedRow: number;

      constructor(private resolver: ComponentFactoryResolver) { }

      insertComponent(index: number) {
        if (this.expandedRow != null) {
          // clear old content
          this.rowContainers.toArray()[this.expandedRow].clear();
        }

        if (this.expandedRow === index) {
          this.expandedRow = null;
        } else {
          const container = this.rowContainers.toArray()[index];
          const factory: ComponentFactory<any> = this.resolver.resolveComponentFactory(InlineMessageComponent);
          const inlineComponent = container.createComponent(factory);

          inlineComponent.instance.user = this.dataSource.data[index].name;
          inlineComponent.instance.weight = this.dataSource.data[index].weight;
          this.expandedRow = index;
        }
      }
    }

InlineMessageComponent.ts

/*
* The component that will be dynamically rendered between table rows
*/ 
@Component({
  selector: 'app-inline-message',
  template: '<p>Name: {{ user }} |</p><p>| weight {{ weight }}</p>',
  styles: [`
    :host {
      display: flex;
      place-content:center;
      padding: 24px;
      color: #555555;
      font-weight: bold;
      background: rgba(0,0,0,0.1);
    }
  `]
})
export class InlineMessageComponent {
  @Input() user: string;
  @Input() weight: string;
}

Takip ettiğim bu Angular 5 örneği ile aynı davranışı bekliyorum. https://stackblitz.com/edit/angular-yxznk8-rongna

Denenen şeyler:

• <tr mat-row> ile <mat-row> değiş tokuş yapmak

• MatTableDataSource kullanarak yeni satırlar eklemek

  • bu yöntem yeni satırı stilize etmeyi zorlaştırıyor
  • önemli ölçüde daha fazla kod
  • yeni satır boş olsa bile görüntülenir

Cevap #1

Yapmanız gereken tek şey, HTML'i işaretlemenize eklemek ve Angular yönergelerine bağlı kalmaktır:

<div class="example-container mat-elevation-z8">
  <mat-table #table [dataSource]="dataSource">

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position}} </mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef> Weight </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.weight}} </mat-cell>
    </ng-container>

    <!-- Symbol Column -->
    <ng-container matColumnDef="symbol">
      <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.symbol}} </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns; let index = index" 
      (click)="insertComponent(index)"
      #tableRow>
    </mat-row>
  </mat-table>
</div>

Daha kolay ayrıştırılabilir örnek:

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

yerine

   <tr mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>