表上的双向数据绑定

Question

我不知道如何在my.ts和my.html之间的表中进行双向数据绑定我有一个结构，在数组中添加一个新装备，我希望这个新装备在同一屏幕上的桌子上显示。

我认为这有点像添加一个[(ngModel(]，但我不知道

上面是代码

export class EquipamentosCreateComponent implements OnInit {
constructor() {
}
equipamentos: EquipamentoUnico[] = [
{nameSaida: 'teste1', portaSaida: 'teste2'}
];

displayedColumns: string[] = ['nameSaida', 'portaSaida'];
equipamentoUnico: EquipamentoUnico = {
nameSaida: '',
portaSaida: ''
}
ngOnInit(): void {
}
addEquipamento(): void {
this.equipamentos.push(this.equipamentoUnico);
console.log(this.equipamentos);
//console.log(equip);
}
}

<mat-card>
<mat-card-title>Cadastro Equipamento</mat-card-title>
<form>
<mat-form-field>
<input matInput placeholder="Nome Saida" [(ngModel)]="equipamentoUnico.nameSaida" name="nameSaida">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Porta Saida" [(ngModel)]="equipamentoUnico.portaSaida" name="portaSaida">
</mat-form-field>
</form>
<button mat-raised-button (click)="addEquipamento()" color="primary">+</button>
</mat-card>
<div class="mat-elevation-z4">
<table mat-table [dataSource]="equipamentos">
<ng-container matColumnDef="nameSaida">
<th mat-header-cell *matHeaderCellDef>nameSaida</th>
<td mat-cell *matCellDef="let equipamentos;">{{equipamentos.nameSaida}}</td>
</ng-container>
<ng-container matColumnDef="portaSaida">
<th mat-header-cell *matHeaderCellDef>portaSaida</th>
<td mat-cell *matCellDef="let equipamentos">{{equipamentos.portaSaida}}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let equipamentos; columns: displayedColumns"></tr>
</table>
</div>

Answer 1

您的AddEquipmento((方法错误

解决方案代码：

export interface EquipamentoUnico {
nameSaida: string;
portaSaida: string;
}
const ELEMENT_DATA: EquipamentoUnico[] = [
{ nameSaida: 'test1', portaSaida: 'teste2' }
];
export class EquipamentosCreateComponent implements OnInit {
displayedColumns: string[] = ['nameSaida', 'portaSaida'];
equipamentoUnico: EquipamentoUnico = {
nameSaida: '',
portaSaida: ''
}
dataSource = new MatTableDataSource(ELEMENT_DATA);
ngOnInit(): void {
}
addEquipamento() {
ELEMENT_DATA.push(this.equipamentoUnico);
this.dataSource = new MatTableDataSource(ELEMENT_DATA);
this.equipamentoUnico = {
portaSaida: '',
nameSaida: ''
};

}}

HTML您需要更正以下行：

<table mat-table [dataSource]="dataSource">
<td mat-cell *matCellDef="let element;">{{element.nameSaida}}</td>
<td mat-cell *matCellDef="let element;">{{element.portaSaida}}</td>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>