在 Ionic 中更新表单 ion-select

Question

我想在 ion-select 中执行更新，但我不能。 我的编程水平很低，还有很多不懂的地方。

通过 getAllCategories() 方法从具有两个字段（'id'，'name'）的表（'categories'）中读取选项，但我无法获取已分配的'name'字段的值显示出来

我使用 getCategory(1) 方法搜索具有相应 ID 的类别（我输入了 1，因为我不知道如何搜索变量）但它没有显示为已选中（它显示“选择类别') 尽管我认为我发送的数据是正确的，因为它出现在 console.log 中

更新食谱.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>

更新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

耶稣...代码中有很多错别字。 首先，如果您是新手，则需要阅读文档。 您的要求非常基本，文档提供了您的答案。 这是你学习的唯一途径。 https://ionicframework.com/docs/api/select#object-value-references