我需要将数据放入表中的新行答案

【问题标题】：I need to a new row with data into table我需要将数据放入表中的新行
【发布时间】：2018-11-06 13:20:34
【问题描述】：

我需要将数据添加到表格中，通过单击添加站点按钮，必须添加带有名称描述的数据，而无需在表格中提供任何输入。现在我需要通过将数据传递到数组中来添加数据，并能够在添加站点按钮处调用它们，并且应该将调用的行添加到表中。请帮我解决这个问题。

<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 
  }

}

【问题讨论】：

标签： html angular typescript angular6

【解决方案1】：

只需创建一个添加新站点的函数。

组件：

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

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

     // OR

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

【讨论】：