Ionic中离子选择的改进形式

aoyhnmkz  于 2023-02-01  发布在  Ionic
关注(0)|答案(1)|浏览(175)

我想在离子选择中执行更新,但我不能。我的编程水平很低,还有很多东西我不明白。
选项是通过getAllCategories()方法从具有两个字段('id ',' name')的表('categories ')中读取的,但我无法获取已分配给它的'name'字段的值以进行显示
我使用getCategory(1)方法(我输入了1,因为我不知道如何在变量中搜索)搜索具有相应ID的类别,但是它没有显示为选中状态(显示为“Select Category”),尽管我认为我发送的数据是正确的,因为它显示在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']);
        });
    }
  }
2skhul33

2skhul331#

代码中有许多错别字。
第二,如果你是新手,你需要阅读文档,文档提供了你的答案:https://ionicframework.com/docs/api/select#object-value-references

相关问题