Establecer valor para seleccionar (Angular)

CorePress2023-11-30  1

Tengo una pestaña de selección y quiero establecerle un valor en ngOnInit(). Mi selección se ve así:

<div class="form__field">
  <label class="form__label">Project</label>
  <mat-form-field>
    <mat-select formControlName="project">
      <mat-option *ngFor="let project of projects" [value]="project">
        {{project.name}}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

Donde está el proyecto en un objeto con campos como

{
author: 'name', 
name: 'name',
participants: {'', ''},
uid: '',
projectId:''
}

Establecí un valor en el archivo .ts pero no funciona. (Funciona para otros campos pero no para esta selección) He probado diferentes formas como this.task.projectFull.name...

this.form.setValue({
   name: this.task.name,
   priority: this.task.priority,
   assignee: this.task.assignee,
   project: this.task.projectFull, //projectFull: this.form.value.project
});

this.task es mi tarea que obtengo de Firestore, su interfaz se ve así:

 export default interface Task {
  id?: string;
  name?: string;
  createdBy?: string;
  completed?: boolean;
  priority?: string;
  assignee?: string;
  projectFull?;
  project?: string;
  projectId?: string;
}

¡Estaría realmente agradecido por cualquier ayuda!

  • editar: parece posible-HTN 8 de junio de 2020 a las 11:41
  • oh, lo entiendo, pero ¿hay alguna manera de poder ponerle un valor? Es un componente para editar la tarea donde necesito obtener todos los datos que están en Firestore y después de editarlos necesito actualizar estos valores. Y uso este objeto en otras funciones, por lo que no puedo reemplazarlo por una cadena, pero necesito mostrarlo en select Carolina 8 de junio de 2020 a las 11:44


------------------------

Debe proporcionar una función compareWith como se describe aquí: Personalización de la selección de opciones

<mat-select [compareWith]="compareFn" formControlName="project">
   <mat-option *ngFor="let project of projects" [value]="project">
      {{project.name}}
   </mat-option>
</mat-select>
compareFn(p1: Project, p2: Project): boolean {
    return p1 && p2 ? p1.projectId === p2.projectId : p1 === p2;
}
Su guía para un futuro mejor - libreflare
Su guía para un futuro mejor - libreflare