我想在离子选择中执行更新,但我不能。我的编程水平很低,还有很多东西我不明白。
选项是通过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']);
});
}
}
1条答案
按热度按时间2skhul331#
代码中有许多错别字。
第二,如果你是新手,你需要阅读文档,文档提供了你的答案:https://ionicframework.com/docs/api/select#object-value-references