Добавление строки горизонтально вниз при нажатии кнопки в (PrimeNg)

Question

Я просто хочу добавить данные из файла json в данные, используя концепции PrimeNg и angualr. На веб-сайте primeNg они дали диалоговое окно для добавления новой строки, но я хочу добавить пустую строку без диалоговое окно с пустыми полями, которые нужно добавить, и для него указаны входные значения,

Вот мой шаблон:

<p-table
  [columns]="cols"
  [value]="teams"
  selectionMode="single"
  [(selection)]="selectedTeam"
  (onRowSelect)="onRowSelect($event)"
  [paginator]="true"
  [rows]="15"
  editMode="row"
>
  <ng-template pTemplate="caption">
    Team Planner
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{ col.header }}
        <p-sortIcon [field]="col.field"></p-sortIcon>
      </th>
      <th style="width: 8em;"></th>
    </tr>
  </ng-template>
  <ng-template
    pTemplate="body"
    let-rowData
    let-columns="columns"
    let-editing="editing"
  >
    <tr [pSelectableRow]="rowData" [pEditableRow]="rowData">
      <td>
        <!-- {{ rowData[col.field] }} -->
        <!-- For Release Name -->
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input
              pInputText
              type="text"
              [(ngModel)]="rowData.releaseName"
              required
            />
          </ng-template>
          <ng-template pTemplate="output">
            {{ rowData.releaseName }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <!-- For username-->

        <p-cellEditor>
          <ng-template pTemplate="input">
            <input
              pInputText
              type="text"
              [(ngModel)]="rowData.userName"
              required
            />
          </ng-template>
          <ng-template pTemplate="output">
            {{ rowData.userName }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <!-- {{ For Model}} -->

        <p-cellEditor>
          <ng-template pTemplate="input">
            <input
              pInputText
              type="text"
              [(ngModel)]="rowData.model"
              required
            />
          </ng-template>
          <ng-template pTemplate="output">
            {{ rowData.model }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <!-- For Role-->

        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="rowData.role" required />
          </ng-template>
          <ng-template pTemplate="output">
            {{ rowData.role }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td>
        <!-- For Availability -->

        <p-cellEditor>
          <ng-template pTemplate="input">
            <input
              pInputText
              type="text"
              [(ngModel)]="rowData.availability"
              required
            />
          </ng-template>
          <ng-template pTemplate="output">
            {{ rowData.availability }}
          </ng-template>
        </p-cellEditor>
      </td>
      <td style="text-align: center;">
        <button
          *ngIf="!editing"
          pButton
          type="button"
          pInitEditableRow
          icon="pi pi-pencil"
          class="ui-button-info"
          (click)="onRowEditInit(rowData)"
        ></button>
        <button
          *ngIf="editing"
          pButton
          type="button"
          pSaveEditableRow
          icon="pi pi-check"
          class="ui-button-success"
          style="margin-right: 0.5em;"
          (click)="save()"
        ></button>
        <button
          *ngIf="editing"
          pButton
          type="button"
          pCancelEditableRow
          icon="pi pi-times"
          class="ui-button-danger"
          (click)="delete()"
        ></button>
      </td>
    </tr>
  </ng-template>

  <!-- Add Button/Adding new user -->
  <ng-template pTemplate="summary" let-rowData>
    <div style="text-align: left;">
      <button
        type="button"
        pButton
        icon="pi pi-plus"
        (click)="showDialogToAdd()"
        label="Add"
      ></button>
    </div>
  </ng-template>
</p-table>

Вот мой файл .ts:

import { Component, OnInit } from '@angular/core';
import { TeamPlannerService } from 'src/app/services/team-planner.service';
import { Team } from 'src/assets/Team';

@Component({
  selector: 'app-team-planner',
  templateUrl: './team-planner.component.html',
  styleUrls: ['./team-planner.component.css'],
})
export class TeamPlannerComponent implements OnInit {
  displayDialog: boolean;
  team: Team = {};

  selectedTeam: Team;

  newTeam: boolean;

  teams: Team[];

  cols: any[];
  //   cloneTeam: { [s: string]: Team } = {};
  constructor(private teamPlannerService: TeamPlannerService) {}

  ngOnInit() {
    this.teamPlannerService
      .getTeamListFromJson()
      .then((teams) => (this.teams = teams));

    this.teamPlannerService
      .getTeamListFromJson()
      .then((teams) => (this.teams = teams));

    this.cols = [
      { field: 'releaseName', header: 'Release Name' },
      { field: 'userName', header: 'User Name' },
      { field: 'model', header: 'Model' },
      { field: 'role', header: 'Role' },
      { field: 'availability', header: 'Availability' },
    ];
  }

  onRowEditInit(event) {
    this.newTeam = false;
    this.team = this.cloneTeam(event.data);
  }

  //To add a new row
  showDialogToAdd() {
    this.newTeam = true;
    // this.team = {
    //   releaseName: '',
    //   userName: '',
    //   model: '',
    //   role: '',
    //   availability: '',
    // };
  // this.displayDialog = true;

    // return {
    //   releaseName: '',
    //   userName: '',
    //   model: '',
    //   role: '',
    //   availability: '',
    // };

  }

  save() {
    let teams = [...this.teams];
    if (this.newTeam) teams.push(this.team);
    else teams[this.teams.indexOf(this.selectedTeam)] = this.team;

    this.teamPlannerService.addTeam(this.team);

    this.teams = teams;
    this.team = null;
    // this.displayDialog = false;
  }

  delete() {
    let index = this.teams.indexOf(this.selectedTeam);
    this.teams = this.teams.filter((val, i) => i != index);
    this.team = null;
    this.displayDialog = false;
  }

  onRowSelect(event) {
    this.newTeam = false;
    this.team = this.cloneTeam(event.data);
    // this.displayDialog = true;
  }

  cloneTeam(c: Team): Team {
    let team = {};
    for (let prop in c) {
      team[prop] = c[prop];
    }
    return team;
  }
}

Не могли бы вы сказать мне, что делать?