updating form ion-select in Ionic

Question

I want to perform an update in an ion-select but I can't. My level of programming is very low and there are still many things that I don't understand.

The options are read from a table ('categories') that has two fields ('id', 'name') through the getAllCategories() method, but I can't get the value of the 'name' field that is already assigned to it to be displayed

I do a search for the category with its corresponding Id with the getCategory(1) method (I have put a 1, because I don't know how to search through a variable) but it does not appear selected (where it says 'Select Category') despite I think I'm sending the data correctly, because it appears in the console.log

update-recipe.page.html

<ion-item lines="full">
    <ion-select id="category" name="category" placeHolder="Select Category" (ionChange)="ObtenerCategoryId($event)">
    <ion-select-option *ngFor="let category of categories" value="{{category.id}}">{{category.name}}</ion-select-option>
 </ion-select>
  </ion-item>
<form [formGroup]="updateRecipeForm" (ngSubmit)="onSubmit()" novalidate>
    <ion-item lines="full">
      <ion-label position="floating">Tittle</ion-label>
      <ion-input formControlName="tittle" type="text" required></ion-input>
    </ion-item>
    <!-- <span class="error ion-padding" *ngIf="isSubmitted && errorControl.name.errors?.required">Tittle is required.</span> -->
    <ion-item lines="full">
      <ion-label position="floating">Description</ion-label>
      <ion-input formControlName="description" type="text" required></ion-input>
    </ion-item>
      
    <!-- <span class="error ion-padding" *ngIf="isSubmitted && errorControl.description.errors?.required">Description is required.</span> -->
    <ion-row>
      <ion-col>
        <ion-button type="submit" color="primary" expand="block">Update</ion-button>
      </ion-col>
    </ion-row>
  </form>

update-crecipe.page.ts

export class Recipe {
  id: number;
  tittle: string;
  description: string;
  filename: string;
  userId: number;
  categoryId: number;
}

@Component({
  selector: "app-update-recipe",
  templateUrl: "./update-recipe.page.html",
  styleUrls: ["./update-recipe.page.scss"],
})

export class UpdateRecipePage implements OnInit {

  categories: any =[];
  categoryId: any;
  updateRecipeForm: FormGroup;
  isSubmitted = false;
  id: any;
  capturedPhoto = '';
  // eslint-disable-next-line @typescript-eslint/no-inferrable-types
  imageSaved: string = '';

constructor(
    private recipeService: RecipeService,
    private categoryService: CategoryService,
    private activatedRoute: ActivatedRoute,
    private formBuilder: FormBuilder,
    private router: Router,
    private photoService: PhotoService,
    private storage: Storage
  ) {
    this.id = this.activatedRoute.snapshot.paramMap.get('id');
  }

 ionViewWillEnter(){
    this.findRecipe(this.id);
    this.updateRecipeForm = this.formBuilder.group({
      tittle: [''],
      description: [''],
      filename: [''],
      categoryId: ['']
    });
    this.capturedPhoto = '';
    
  }  

 ngOnInit() {
    this.findRecipe(this.id);
    this.updateRecipeForm = this.formBuilder.group({
      tittle: [''],
      description: [''],
      filename: [''],
      categoryId: ['']
    },
    );
    this.capturedPhoto = '';
   //   this.updateRecipeForm.reset();
   this.getCategory(1);
   this.getAllCategories();
  }
 async findRecipe(id) {
    let token = await this.storage.get("token");
    this.recipeService.getRecipe(this.id, token).subscribe(async data => {
      this.imageSaved = data['filename'];
      this.updateRecipeForm.setValue({
        tittle: data['tittle'],
        description: data['description'],
        filename: data['filename'],
        categoryId: data ['categoryId']
      });
    });
    
  }

async ObtenerCategoryId(e){
    console.log("valor obtenido"+e.detail.value);
    let categoryId = await this.storage.set("categoryId_st", e.detail.value);
  }

  async getCategory(id) {
    let token = await this.storage.get("token");
    
    this.categoryService.getCategory(id, token).subscribe(async res => {

      console.log(res);
      this.categories = res;
    }, error => {
      console.log(error);
      console.log("User not authenticated. Please log in");
      this.router.navigateByUrl("/home");
    });
  }

  async getAllCategories() {
    let token = await this.storage.get("token");
    
    this.categoryService.getCategories(token).subscribe(async res => {

      console.log(res);
      this.categories = res;
    }, error => {
      console.log(error);
      console.log("User not authenticated. Please log in");
      this.router.navigateByUrl("/home");
    });
  }

async onSubmit() {
    this.isSubmitted = true;
    if (!this.updateRecipeForm.valid) {
      return false;
    } else {
      let blob = null;
      if (this.capturedPhoto !== "") {
        const response = await fetch(this.capturedPhoto);
        blob = await response.blob();
      }
      (
      await this.recipeService
        .updateRecipe(this.id, this.updateRecipeForm.value, blob, this.getCategory(this.id)))
        .subscribe(data => {
          console.log('¡Photo sent!');
          this.updateRecipeForm.reset();
          this.router.navigate(['/you-are-logged-in']);
        });
    }
  }

Answer 1

There are many typos in the code.

Secondly, you need to read the documentation if you're new. The documentation provides your answer: https://ionicframework.com/docs/api/select#object-value-references