angular - 获取元素的值并使用同一 mat 选择或表 Angular Typescript 中其他对象的 id 将其解析为 mat 选项

Question

我有这张表https://i.stack.imgur.com/QMWnN.png 我想要的是当用户选择一个元素并验证它时，它会在我刷新时显示

此表使用 3 个实体：能力：https ://i.stack.imgur.com/7a3lK.png

尼维奥：https ://i.stack.imgur.com/wiqkU.png

而这个我可以获取用户选择的元素https://i.stack.imgur.com/KVq7z.png

后端运行良好https://i.stack.imgur.com/Rd3ga.png这是我的源代码

<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">&times;</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);
  })
}
}

标签： angular