我需要将数据插入表格的新行

Question

我需要向表中添加数据，方法是单击添加具有名称描述的站点按钮数据，而无需在表上提供任何输入。现在，我需要通过将数据传递到数组中并能够在“添加站点”按钮上调用它们来添加数据，并且应该将被调用的行添加到表中。请帮助我。

<div class="table-container mat-elevation-z8">
  <mat-table [dataSource]="dataSource" matSort matSortActive="name" matSortDirection="asc" matSortDisableClear>
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef mat-sort-header > Organization Name <mat-icon>filter_list</mat-icon> </mat-header-cell>
      <mat-cell *matCellDef="let databaseList" > {{databaseList.name}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="description">
      <mat-header-cell *matHeaderCellDef mat-sort-header > Description <mat-icon>filter_list</mat-icon> </mat-header-cell>
      <mat-cell *matCellDef="let databaseList" > {{databaseList.description}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="remove">
      <mat-header-cell *matHeaderCellDef mat-sort-header > Remove  </mat-header-cell>
      <mat-cell *matCellDef="let row; let i = index;">
        <button mat-icon-button color="primary" (click)="deleteRow(i)">
          <mat-icon>remove_circle</mat-icon>
        </button>
      </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="displayedColumns" ></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;" ></mat-row>

  </mat-table>
</div>

<div class="actionsLine">
  <span class='leftButtons'>
    <button class="mat-button menu-button" (click)="addSite()">
      <mat-icon color="primary"> add_to_photos </mat-icon>
      Add Site
    </button>
  </span>
  <ng-container *ngIf="showButtons">
    <span class="rightButtons">
      <button class="mat-button menu-button" (click)="cancel()">
        <mat-icon>block</mat-icon> CANCEL
      </button>
      <button class="mat-button primary-button" (click)="saveChanges()">
        SAVE
      </button>
    </span>        
  </ng-container>
</div>  

service file


export interface Database {
  organizationId : String;
  organizationname: String;
  description: String;
}

const Management_DATABASE: Database[]=[
  {
    Id:'A123-ABCD-2458SA-14FA',
   name: 'hospital_Arun',
    description:'demo group of Arun hospital'
  },
  {
    Id:'B123-PASA-2458SA-15FA',
    name: 'Ameresh_hospital',
    description:'Ameresh is a hospital for demo'
  },
  {
    Id:'C123-LATRU-2458SA-13FA',
    name: 'Biresh_hospital',
    description:'Biresh group'
  },
  {
    Id:'D123-METRO-2458SA-18FA',
    name: 'Deny_hospital',
    description:'Deny_hospital is used for demo purpose'
  },
  {
    Id:'E123-ABCD-2458SA-14FA',
    name: 'Pravan_hospital',
    description:'demo group of Pravan_hospital'
  },
]


@Injectable()
export class ManagementService {

  constructor() { }
  getOrganization(): Database[]{
    return Management_DATABASE;
  }

  addOrganization() : Database[]{
    return 
  }

}

Answer 1

只需创建添加新网站的功能即可。

  

组件：

您需要将新的空白对象推入dataSource或Management_DATABASE

  addSite() {    
      this.dataSource.push({organizationId: '', organizationname: '', description: ''});

     // OR

      this.Management_DATABASE.push({organizationId: '', organizationname: '', description: ''});
    }