angular - 角材料可编辑表

Question

我正在尝试使用有角材料来实现屏幕下方。

到目前为止，这是我的代码

html组件代码

<mat-card class="FactorAllocationCard">
  <mat-card-header>
    <mat-card-title>Allocate Factors</mat-card-title>
    <span class="spacer"></span>
    <button mat-raised-button color="primary">
      Save
    </button>
  </mat-card-header>
  <mat-divider></mat-divider>
  <mat-card-content>
    <div class="factalloctable">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container matColumnDef="Description">
          <th mat-header-cell *matHeaderCellDef>Factor</th>
          <td mat-cell *matCellDef="let element">{{ element.Description }}</td>
        </ng-container>
        <!-- Edit Update Column -->
        <ng-container matColumnDef="Action">
          <th mat-header-cell *matHeaderCellDef>
            Allocate
          </th>
          <td mat-cell *matCellDef="let element">
            <button mat-button>
              <mat-icon class="mat-icon-factor-def" color="primary"
                >remove_circle</mat-icon
              >
            </button>
            <mat-slider thumbLabel step="0.1" max="30" min="0" color="primary">
            </mat-slider>
            <mat-icon class="mat-icon-factor-def">add_circle</mat-icon>
          </td>
        </ng-container>
        <ng-container matColumnDef="Value">
          <th mat-header-cell *matHeaderCellDef>Allocated Value</th>
          <td mat-cell *matCellDef="let element">{{ element.Value }}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </div>
  </mat-card-content>
</mat-card>

打字稿代码

import { Component, OnInit } from '@angular/core';
import { FactorsService } from './../../factors-services';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-factor-cat',
  templateUrl: './factor-cat.component.html',
  styleUrls: ['./factor-cat.component.css'],
})
export class FactorCatComponent implements OnInit {
  CurrentAllocation = [];

  constructor(public factorsservice: FactorsService) {}
  displayedColumns: string[] = ['Description', 'Action', 'Value'];
  dataSource = new MatTableDataSource(this.factorsservice.Choosen);
  ngOnInit(): void {}
}

我只想在用户进行所有分配并按保存后保存。当用户更改滑块值时，也需要更新值列。滑块末尾的 + 和 - 可用于更改滑块的步长值。

我搜索了很多类似的问题，但找不到任何问题。

标签： angularmat-tableangular-material-7

Answer 1

干得好。

https://stackblitz.com/edit/angular-fgyuy8?embed=1&file=src/app/table-basic-example.html

保存数据检查控制台和方法时：

 saveData() {
    //or this.dataSource.data if you are going with new MatTableDataSource()
    console.log(this.dataSource);
  }