Question

所以我有一个看起来像这样的自定义组件：

student.ts

import { Component, Input } from '@angular/core';


@Component({
  selector: 'student',
  templateUrl: 'student.html'
})
export class StudentComponent {

  @Input() name: string;
  public status: string;
  public notes: string;

  public tardyTime: string;
  public isTardy : boolean = false;;

  constructor() {
  }

  tardyClicked(){
    this.isTardy = true;
  }

  notTardy(){
    this.isTardy = false;
  }
}

，模板如下所示：

student.html

<h4 class="padding">{{name}}</h4>
<ion-segment [(ngModel)]="status">
    <ion-segment-button value="p" (ionSelect)="notTardy()">
      Present
    </ion-segment-button>
    <ion-segment-button value="t" (ionSelect)="tardyClicked()" >
      Tardy
    </ion-segment-button>
    <ion-segment-button value="a" (ionSelect)="notTardy()">
      Absent
    </ion-segment-button>
  </ion-segment>
  <ion-item *ngIf="isTardy" >
    <ion-label>Tardy Time:</ion-label>
    <ion-datetime displayFormat="h:mm a" [(ngModel)]="tardyTime"></ion-datetime>
  </ion-item>
  <ion-item>
    <ion-input [(ngModel)]= "notes" type="text" placeholder="Notes:"></ion-input>
  </ion-item>

现在我在我的应用中使用这个自定义组件，如下所示：

page.html

<ion-content padding>
  <ion-list>
    <student *ngFor="let student of studentArray" [name]="student" ></student>
  </ion-list>
  <p>
    <button ion-button color="primary" (click)="showPrompt()" block>Submit</button>
  </p>
</ion-content>

我希望能够在我的page.ts中创建一个对象数组，这些对象将从学生组件中拉出并为每个组件创建一个对象

{
  name : studentcomponent.name
  status : studentcomponent.status
}

这可能吗？

Answer 1

您应该做什么在page.ts中创建具有初始状态值的对象数组。然后将学生对象传递给学生组件，如下所示：

<ion-list>
    <student *ngFor="let student of studentArray"
       [student]="student"></student>
</ion-list>

学生组件将更改状态，并且您的page.ts也会更改。

在Ionic 2中使用自定义组件进行数据处理

1 个答案: