Question

当我单击添加按钮时，无法添加该行。如何在表格中添加一行？

我的HTML文件如下：

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

我的ts文件如下：

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('');
  }
}

我在上面提到了我的代码。让我知道如何解决此问题。

Answer 1

您需要推送对象而不是类似字符串的

newRow() {
    this.fieldArray.push({
       domainName:'',
       domainSelect:'',
       domainRequired:'',
       domainIcon:''
    });
}

注意：-您可以使用默认值代替上述对象中的''

使用angular 7单击添加按钮时如何在表中添加行

1 个答案: