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

Question

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

学生网

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;
  }
}

模板如下所示：

学生.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>

现在，我在应用程序中使用此自定义组件，如下所示：

页面.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。