How to add a row in a table when clicking the add button using angular 7

When I am clicking the add button, the row cannot be added. How can I add a row in a table?

My HTML file looks like:

<div>
<div>
<table class="table table-bordered table-striped mb-0 mt-3">
  <thead>
    <tr>
      <th>Name</th>
      <th>Type</th>
      <th>Required</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let field of fieldArray; let i = index">
      <td>
        <input type="text" [(ngModel)]="field.domainName"> 
</td>
      <td>
        <div class="optionDropdown" 
[(ngModel)]="field.domainSelect">
        <nb-select class="" placeholder="All" 
[(selected)]="selectedItem">
          <nb-option value="">Option empty</nb-option>
          <nb-option value="0">Integer</nb-option>
          <nb-option value="1">Float</nb-option>
          <nb-option value="2">String</nb-option>
          <nb-option value="3">Character</nb-option>
          <nb-option value="4">Boolean</nb-option>
        </nb-select>
      </div></td>
      <td>
        <div [(ngModel)]="field.domainRequired">
            <nb-checkbox (checkedChange)="toggle($event)"></nb- 
checkbox>
        </div>            
      </td>
      <td (click)="newRow()">
        <div [(ngModel)]="field.domainIcon">
            <i class="plusIcon nb-plus"></i>
        </div>            
      </td>
    </tr>
  </tbody>
</table>
</div>
</div>

My ts file looks like:

export class DomainStructuredDataComponent implements OnInit {

  constructor() { }
  checked = false;
  domain: string;
  selectedItem: any;
  domainSelect: any;
  domainIcon: boolean;
  fieldArray: any = [];
  newAttribute: any = {};
  ngOnInit() {
  }
  toggle(checked: boolean) {
    this.checked = checked;
  }
  newRow() {
    this.fieldArray.push('');
  }
}

I mentioned my code above. Let me know, how to fix it.

Source: New feed
Source Url How to add a row in a table when clicking the add button using angular 7