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

Question

我在 @Page 中几乎没有 select 输入，除了存储 selected 选项的值，比如 {{project.title}}，我还需要 return 另一个select编辑对象属性，例如 {{project.id}} 或整个对象。

如果我用于前任。 (change)='DoThing($event)'，它 return 只是字符串 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 创建的一项，这是正常的。

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

会更好

value="{{project.id}}"

然后你从 $event 得到 project.id。

<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)'>

您将获得整个 select DOM 对象，您可以探索其子项以找到选中的对象及其属性

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

Accessing selected object attributes in form in Angular 2 / Ionic 2

javascript

ionic2

angular