我有一个选择框和一个带有数据的数据表，当我从选择框中选择值时，将生成数据并将其绑定到将要检查的数据表的复选框。.但是问题是我选择另一个值，然后将检查由该值生成的新数据，并检查先前选择的值中的旧数据
Animals.ts文件
import {
Component,
OnInit
} from '@angular/core';
import {
SelectionModel
} from '@angular/cdk/collections';
import {
MatTableDataSource
} from '@angular/material';
export interface PeriodicElement {
name: string;
position: number;
weight: number;
symbol: string;
state: boolean;
selected: boolean;
}
@Component({
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
})
export class TableBasicExample {
animals = [];
desiCow = []
displayedColumns: string[] = ['select', 'position', 'name', 'weight', 'symbol'];
dataSource = [{
position: 1,
name: 'Hydrogen',
state: false,
selected: false
},
{
position: 2,
name: 'Helium',
state: false,
selected: false
},
{
position: 3,
name: 'Lithium',
state: false,
selected: false
},
{
position: 4,
name: 'Beryllium',
state: false,
selected: false
},
{
position: 5,
name: 'Arsenic',
state: false,
selected: false
},
{
position: 6,
name: 'Barium',
state: false,
selected: false
},
];
ngOnInit() {
this.getAnimalsType();
}
//get animal type name
getAnimalsType() {
this.animals.push({
id: 62,
name: "desicow"
}, {
id: 63,
name: "jersey"
})
}
//select animal type for data to be checked
selectAnimalType(event) {
console.log(event, "evemt")
// this.getanimalsQuestion(event);
if (event == 62) {
this.desiCow = []
this.desiCow.push({
position: 1,
name: 'Hydrogen',
state: false,
selected: false
}, {
position: 4,
name: 'Beryllium',
state: false,
selected: false
})
}
if (event == 63) {
this.desiCow = []
this.desiCow.push({
position: 2,
name: 'Helium',
state: false,
selected: false
}, {
position: 3,
name: 'Lithium',
state: true,
selected: true
}, {
position: 6,
name: 'Barium',
state: false,
selected: false
})
}
console.log(this.dataSource)
this.mapObjectBasedOnAnimal(event)
}
//function to bind the check box
mapObjectBasedOnAnimal(animalId) {
for (let v = 0; v < this.desiCow.length; v++) {
for (let k = 0; k < this.dataSource.length; k++) {
if (this.dataSource[v] != undefined) {
if (this.dataSource[k].position === this.desiCow[v].position) {
this.dataSource[k].state = this.desiCow[v].state;
this.dataSource[k].state = true;
this.dataSource[k].selected = this.desiCow[v].selected;
this.dataSource[k].selected = true;
console.log("success", this.dataSource[k]);
}
}
}
}
}
}animals.html file
<mat-grid-list cols="3" rowHeight="3:3">
<form class="example-form" #form="ngForm" (ngSubmit)="mapAnimalType(form.value)">
<mat-grid-tile>
<h6 class="catTitle">Animal Type</h6>
</mat-grid-tile>
<mat-grid-tile>
<mat-form-field>
<mat-select required (selectionChange)="selectAnimalType(animal)" [(ngModel)]="animal" name="animal" placeholder="Select Animal Type">
<mat-option *ngFor="let animal of animals" [value]="animal.id">
{{animal.name}}
</mat-option>
</mat-select>
<mat-error>Animal Type is required</mat-error>
</mat-form-field>
</mat-grid-tile>
<mat-grid-tile>
<button type="submit" [disabled]="!form.valid" mat-raised-button class="primary-button" color="primary">Submit</button>
</mat-grid-tile>
</form>
</mat-grid-list>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox [ngModel]="selected"></mat-checkbox>
</th>
<td mat-cell *matCellDef="let element; let i = index">
<mat-checkbox [value]="element.position" [(ngModel)]="element.state"></mat-checkbox>
</td>
</ng-container>
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="selection.toggle(row)">
</tr>
</table>
从选择框中选择值时，应始终在数据表上检查新数据
下面也是代码的链接 https://stackblitz.com/edit/angular-3kbmuh
请帮助我解决这个感谢
答案 0 :(得分：0)
在设置新项目的状态之前，您应该重置原始数据源项目。
selectAnimalType(event) {
console.log(event, "evemt")
this.dataSource.forEach(item=>item.state = false); //<--reset all items
// this.getanimalsQuestion(event);
if (event == 62) {
this.desiCow = []
this.desiCow.push({ position: 1, name: 'Hydrogen', state: false, selected: false },
{ position: 4, name: 'Beryllium', state: false, selected: false })
}
if (event == 63) {
this.desiCow = []
this.desiCow.push({ position: 2, name: 'Helium', state: false, selected: false },
{ position: 3, name: 'Lithium', state: true, selected: true },
{ position: 6, name: 'Barium', state: false, selected: false })
}
console.log(this.dataSource)
this.mapObjectBasedOnAnimal(event)
}
答案 1 :(得分：0)
只需在SelectAnimalType（）中使用以下行，它将每次重置数据源。
this.dataSource.forEach（item => item.state = false）; // <-重置所有项目