从无线电选择中检索值并将其传递到端点离子2 + / angular2 +(retrieving value from radio selection and passing it into an en

从无线电选择中检索值并将其传递到端点离子2 + / angular2 +(retrieving value from radio selection and passing it into an endpoint ionic 2+/angular2+)

就像标题所说，我如何从选定的单选按钮值中检索对象？ 选择一个按钮后，该对象将被放入API端点，用户将根据该对象检索更多数据。如您所见，我在视图中显示项目描述。 我想检索与该描述相关联的项ID。

HTML

<ion-content> <form (ngSubmit)="logForm(form)"> <ion-list radio-group [(ngModel)]="value"> <ion-item *ngFor="let item of items" > <ion-label>{{item.description}}</ion-label> <ion-radio [value]="value"></ion-radio> </ion-item> </ion-list> </ion-list> <ion-item> <ion-label> <button type="submit">Continue</button> </ion-label> </ion-item> </form> </ion-content>

TS

export class ItemPage{ items: any; constructor(){} getItems(){ this.itemService.getItems().subscribe(item => { this.items = item }) } logForm(form){ console.log(form.value) } }

Just like the title says, how would I go about retrieving an object from a selected radio button value? Once a button is selected that object is then placed into an API endpoint where the user will retrieve more data based on that object.As you see I'm displaying the item description in the view. I would like to retrieve the item id associated with that description.

HTML

<ion-content> <form (ngSubmit)="logForm(form)"> <ion-list radio-group [(ngModel)]="value"> <ion-item *ngFor="let item of items" > <ion-label>{{item.description}}</ion-label> <ion-radio [value]="value"></ion-radio> </ion-item> </ion-list> </ion-list> <ion-item> <ion-label> <button type="submit">Continue</button> </ion-label> </ion-item> </form> </ion-content>

TS

export class ItemPage{ items: any; constructor(){} getItems(){ this.itemService.getItems().subscribe(item => { this.items = item }) } logForm(form){ console.log(form.value) } }

最满意答案

您可以使用[(ngModel)]获取所选项目， 如文档所示 ，但您必须传递name属性，否则Ionic将引发错误。 或者，如果要使用检查事件，可以使用(ionSelect)作为单选按钮的属性，例如：

在StackBlitz中查看它的实际操作

HTML：

<ion-content> <h1>Page</h1> <p>Selected item: {{itemChecked?.id}} {{itemChecked?.description}}</p> <p>{{log}}</p> <form (ngSubmit)="logForm(form)"> <ion-list radio-group name="radio" [(ngModel)]="itemChecked"> <ion-item *ngFor="let item of items" > <ion-label>{{item.description}}</ion-label> <ion-radio (ionSelect)="select(item)" [value]="item"></ion-radio> </ion-item> </ion-list> <ion-item> <ion-label> <button ion-button block type="submit">Continue</button> </ion-label> </ion-item> </form> </ion-content>

打字稿：

items: any; public itemChecked; public log; constructor(){ this.getItems() } getItems(){ this.items = [ { description: 'Item 1', id: 1, }, { description: 'Item 2', id: 2, }, { description: 'Item 3', id: 3, }, { description: 'Item 4', id: 4, }, { description: 'Item 5', id: 5, }, { description: 'Item 6', id: 6, }, ] } logForm(form){ console.log(form.value) } select(item) { this.log = "SELECTED! " + item.description; }

You can use [(ngModel)] to get the selected item as the Documentation says, but you have to pass a name attribute as well, otherwise Ionic will throw an error. Or, if you want to use a check event, you can use (ionSelect) as an attribute of the radio buttons, as the example:

See it in action here in StackBlitz

HTML:

<ion-content> <h1>Page</h1> <p>Selected item: {{itemChecked?.id}} {{itemChecked?.description}}</p> <p>{{log}}</p> <form (ngSubmit)="logForm(form)"> <ion-list radio-group name="radio" [(ngModel)]="itemChecked"> <ion-item *ngFor="let item of items" > <ion-label>{{item.description}}</ion-label> <ion-radio (ionSelect)="select(item)" [value]="item"></ion-radio> </ion-item> </ion-list> <ion-item> <ion-label> <button ion-button block type="submit">Continue</button> </ion-label> </ion-item> </form> </ion-content>

Typescript:

items: any; public itemChecked; public log; constructor(){ this.getItems() } getItems(){ this.items = [ { description: 'Item 1', id: 1, }, { description: 'Item 2', id: 2, }, { description: 'Item 3', id: 3, }, { description: 'Item 4', id: 4, }, { description: 'Item 5', id: 5, }, { description: 'Item 6', id: 6, }, ] } logForm(form){ console.log(form.value) } select(item) { this.log = "SELECTED! " + item.description; }