angular - get value of an element and parse it to mat option using id of other object in same mat select or table
问题描述
I have this table :
What I want is when user select an element and validate it , it show when I make a refresh
this table uses 3 entities : Competences:
niveau:
and this one where i can get the element selected by user :
backend working good ;
and here's my source code
<app-user-profile-card></app-user-profile-card>
<br>
<div [hidden]="!user">
<mat-form-field>
<mat-label>Recherche</mat-label>
<input matInput (keyup)="applyFilter($event)" placeholder="..." #input>
</mat-form-field>
<div class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<!-- Num Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Num. </th>
<td mat-cell *matCellDef="let i = index">
{{this.paginator.pageIndex == 0 ? i + 1 : 1 + i + this.paginator.pageIndex * this.paginator.pageSize}}
</td>
</ng-container>
<!-- Progress Column -->
<ng-container matColumnDef="designation">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Designation </th>
<td mat-cell *matCellDef="let row"> {{row.designation}} </td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="definition">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Definition </th>
<td mat-cell *matCellDef="let row"> {{row.definition}} </td>
</ng-container>
<!-- Color Column -->
<ng-container matColumnDef="outilsEvaluation">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Outils Evaluation </th>
<td mat-cell *matCellDef="let row"> {{row.outilsEvaluation}} </td>
</ng-container>
<ng-container matColumnDef="niveau">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Niveau </th>
<td mat-cell *matCellDef="let row" (click)="getDescriptions(row)">
<mat-form-field>
<mat-label>choisir un niveau </mat-label>
<mat-select id="select2" (selectionChange)="saveCompetenceEvaluations(row,$event.value)">
<mat-option *ngFor="let userEvals of userEval" [hidden]="!userEvals.evaluationPK.idNiveau" [value]="userEvals.evaluationPK.idNiveau" selected>
Niveau {{ userEvals.evaluationPK.idNiveau }}
</mat-option>
<mat-option *ngFor="let description of desc" [value]="description.descriptionPK.idNiveau" matTooltip={{description.description}} matTooltipPosition="left"
matTooltipClass="custom-tooltip" ng-reflect-value="description.descriptionPK.idNiveau">
Niveau {{ description.descriptionPK.idNiveau }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<!-- Row shown when there is no matching data. -->
<tr class="mat-row" *matNoDataRow>
<td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
</tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
<div class="alert alert-success alert-dismissible fade show col-6 mt-3" role="alert" *ngIf="success">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<span id="success3">
<strong>
<i class="fas fa-thumbs-up"> Votre évaluation de compétence a été sauvgarder avec success !</i>
</strong>
</span>
</div>
<button type="button" (click)="onSubmit()" class="btn btn-success mx-auto d-block mt-2" id="submit2">
<i class="feather icon-check-circle"></i>Valider</button>
<br>
<div>
</div>
</div>
</div>
<button mat-button matStepperPrevious>Back</button>
<button mat-button matStepperNext>Next</button>
TS:
import {AfterViewInit, Component, ViewChild} from '@angular/core';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import {MatTableDataSource} from '@angular/material/table';
import { Competence } from 'src/models/competence';
import { CompetenceService } from 'src/Services/competence.service';
import { SharedServicesService } from 'src/Services/shared-services.service';
import { User } from 'src/models/user';
import { NiveauService } from 'src/Services/niveau.service';
import { Niveau } from 'src/models/niveau';
import { DescriptionService } from 'src/Services/description.service';
import { Description } from 'src/models/description';
import { Evaluation } from 'src/models/evaluation';
import { EvaluationPK } from 'src/models/evaluationPK';
import { EvaluationService } from 'src/Services/evaluation.service';
@Component({
selector: 'app-evaluation-competence',
templateUrl: './evaluation-competence.component.html',
styleUrls: ['./evaluation-competence.component.scss']
})
export class EvaluationCompetenceComponent implements AfterViewInit {
displayedColumns: string[] = ['position', 'designation', 'definition', 'outilsEvaluation','niveau'];
dataSource: MatTableDataSource<Competence>;
competences: Array<Competence>=[];
desc : Array<Description> = [];
idCompet : number;
tempList: Array<Evaluation> = [];
userEval : Array<Evaluation> = [];
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
user: User = new User();
success = false;
ngOnInit(): void {
this.sharedServicesService.getValue().subscribe(value=>{
this.user = value;
});
}
constructor(private readonly sharedServicesService: SharedServicesService,
private competenceService: CompetenceService,
private niveauxServ : NiveauService,
private descrServ : DescriptionService,
private evalcomp : EvaluationService
) {
this.competenceService.getCompetenceList().subscribe(data =>{ this.competences = data;
this.dataSource = new MatTableDataSource(this.competences);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}
ngAfterViewInit() {
}
applyFilter(event: Event) {
const filterValue = (event.target as HTMLInputElement).value;
this.dataSource.filter = filterValue.trim().toLowerCase();
if (this.dataSource.paginator) {
this.dataSource.paginator.firstPage();
}
}
onSubmit() {
this.evaluate();
this.sharedServicesService.setValue(this.user);
}
evaluate() {
this.success = true;
for (let i = 0; i < this.tempList.length; i++) {
this.evalcomp.newEvaluation(this.tempList[i].evaluationPK.idUser,
this.tempList[i].evaluationPK.idCompetence,
this.tempList[i].evaluationPK.idNiveau).subscribe();
}
}
getDescriptions(competence : Competence){
this.descrServ.getDescriptionByCompetenceId(competence.id).subscribe(data=>{
this.desc = data;
})
}
saveCompetenceEvaluations(competence: Competence , idNiveau : number) {
//console.log("Competence ID:", competence.id,"userId",this.user.id,"niveauID",idNiveau);
let flag = false;
let evaluation : Evaluation = new Evaluation();
let evaluationPk : EvaluationPK = new EvaluationPK();
evaluation.evaluationPK = evaluationPk;
evaluation.evaluationPK.idUser = this.user.id;
evaluation.evaluationPK.idNiveau = idNiveau;
evaluation.evaluationPK.idCompetence = competence.id;
if (this.tempList.length == 0) {
console.log(" empty list ! saving changes ");
this.tempList.push(evaluation);
console.log(evaluation);
}
else {
for (let i = 0; i < this.tempList.length; i++) {
if (this.tempList[i].evaluationPK.idCompetence == evaluation.evaluationPK.idCompetence &&
this.tempList[i].evaluationPK.idUser == evaluation.evaluationPK.idUser ) {
console.log("competence found ! saving new level");
flag = true
console.log("updatig Level ...");
this.tempList[i].evaluationPK.idNiveau=idNiveau;
console.log("saved");
console.log(evaluation);
break;
}
}
if (flag == false) {
console.log("description not found time to push a new description");
this.tempList.push(evaluation);
console.log(evaluation);
}
}
}
getNiveaux(competence : Competence){
this.evalcomp.getUserEval(this.user.id,competence.id).subscribe(data =>{ this.userEval = data;
console.log(this.userEval);
})
}
}
解决方案
推荐阅读
- java - 如何使用 Java 8 在对象列表中获取内部对象的成员
- flutter - 为什么负数的模为正(-7 % 6 == 5)?
- pandas - 如何使用基于涉及整行和先验数据的滚动自定义函数的 Pandas 向量方法
- python - 运行此 Python 代码时面临问题
- python - 如何使用 Hy 模块创建 Python 独立可执行文件?
- c# - 多个表离线同步 Xamarin.Forms & Azure
- c# - 有没有一种方法可以在不向其添加数据的情况下创建数据库 ef 代码优先
- javascript - 更新 state 中数组的状态
- linux - flutter_webview_plugin 一直在加载
- excel - 定义 Excel VBA 宏以打印可变大小的多页