Question

我在@Page中几乎没有选择输入，除了存储所选选项的值，如{{project.title}}之外，我还需要返回另一个选定的对象属性，如{{project.id}}或整个对象。< / p>

如果我用于前。 (change)='DoThing($event)'，它只返回project.title的字符串。我不能把{{object.id}}，它产生运行时错误。

我使用的代码：

<ion-item>
   <ion-label>Project</ion-label>
       <ion-select [(ngModel)]="newTrackedTime.project" (change)='DoThing()'>
           <ion-option *ngFor='#project of myProjects' value="{{project.title}}">{{project.title}}</ion-option>
       </ion-select>
</ion-item>

我确信这应该以某种方式起作用，但在咨询了几篇ANG2表格教程之后，我不清楚如何做到这一点。谢谢！

Answer 1

您无法从*ngFor外部引用由*ngFor创建的一个项目。

您可以使用从project.title获得的$event来myProjects查找项目。我想将id分配给value

会更好

value="{{project.id}}"

然后您从project.id获得$event。

<ion-item>
   <ion-label>Project</ion-label>
       <ion-select [(ngModel)]="newTrackedTime.project" (change)='DoThing($event)'>
           <ion-option *ngFor='#project of myProjects' value="{{project.id}}">{{project.title}}</ion-option>
       </ion-select>
</ion-item>

...

DoThing(id) {
  let project = this.myProjects.find((prj) => { return prj.id == id; });
  ...
}

Answer 2

您可以尝试以下方法：

<ion-select [(ngModel)]="newTrackedTime.project" (change)='DoThing()'>
  <ion-option *ngFor='#project of myProjects' 
    [attr.value]="project.title">{{project.title}}</ion-option>
</ion-select>

修改

您的错误表示您使用此：

(change)='DoThing({{project.id}})'

但project仅适用于选项中的ngFor ...

Answer 3

为您的ion-select命名，并将其传递给DoThing()：

<ion-select name="selectTime" [(ngModel)]="newTrackedTime.project" (change)='DoThing(selectTime)'>

您将获得整个选择DOM对象，您可以探索其子项以查找已检查的对象及其属性

在Angular 2 / Ionic 2中访问表单中的选定对象属性

3 个答案: