updating form ion-select in Ionic - ionic-framework

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