Question

我正在构建一个表单组件，以从用户那里获取一些数据并将其发送回另一个组件，该组件必须根据这些值进行更新。

在我的代码中，我有两个部分： 1）余额页面 2）余额增加部分我希望每次用户在“余额”菜单组件中填写表格时都会更新“余额”页面，我需要在“余额”页面中为提交的每种表格创建一张新卡。

Balance.page.ts：

constructor(
  private router: Router,
  ) { }

ngOnInit() {
  }

addToList() {
  this.router.navigateByUrl('balance-add')
}

balance.page.html：

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Balance:</ion-card-title>
    </ion-card-header>
    <ion-card-content>
      <div>
        {{this.balance}}
      </div>
    </ion-card-content>
  </ion-card>

//Here <ion-card> for each form submitted 
//<ion-card *ngFor="let form of list_of_forms"></ion-card>


</ion-content>

<ion-footer>
  <div>
    <ion-icon name="add-circle" (click)="addToList()"></ion-icon>
  </div>
</ion-footer>

第二个组件是balance-add.component.ts （我不知道如何实现sendData方法）


constructor() { }

ngOnInit() {}

sendData() {
// ???
}

这是html：

<div>
  <ion-item>
    <ion-label>How much did you spend?</ion-label>
  <ion-select [(ngModel)]="buy.cost" okText="Okay" cancelText="Dismiss">
    <ion-select-option value="ten">10</ion-select-option>
    <ion-select-option value="twelve">20</ion-select-option>
  </ion-select>
  </ion-item>

  <ion-item>
    <ion-label>What is the item?</ion-label>
  <ion-input [(ngModel)]="buy.item" placeholder="E.g. Eggs></ion-input>
  </ion-item>

<ion-button (click)="sendData()"> ADD TO BALANCE </ion-button>

</div>

谢谢

如何在Angular中提交表单并发送回数据？

0 个答案: