Question

我是离子的新手，我正在尝试在卡中添加记录并且它已成功添加但当我尝试添加新记录时，它添加到同一张卡中并不会创建带有数据的新卡。我尝试使用嵌套组件，但它不会工作。请帮我。以下是我的代码

.html文件

   <ion-item>
  <ion-card class="ion-card">
    <ion-card-content
        *ngFor="let bindlcdetail of bindlcdetails" class="ion-card-content">
      {{bindlcdetail}}
    </ion-card-content>
  </ion-card>
</ion-item>

.ts文件

  addLocalConveyance(): void {
     this.bindlcdetails.push(`Allotted Type= ${this.allottedtype}`,
                             `vehicle Type= ${this.vehicletype}`,
                             `From Location= ${this.fromlocation}`, 
                             `To Location= ${this.tolocation}`,
                             `From Date= ${this.fromdate}`,
                             `To Date= ${this.todate}`, 
                             `KMs= ${this.kms}`, 
                             `Amount= ${this.amount}`);

   this.fromlocation = '';
   this.tolocation = '';
   this.fromdate = null;
   this.todate = null;
   this.kms = null;
   this.amount = null;
 }

更新我想要输出像img

   https://i.stack.imgur.com/doQqb.png

Answer 1

所以，只有一个错误。您将*ngFor放在错误的位置。

只需将其替换为以下代码：

 <ion-item>
  <ion-card *ngFor="let bindlcdetail of bindlcdetails" class="ion-card">
    <ion-card-content class="ion-card-content">
      {{bindlcdetail.allotedType}}
      {{bindlcdetail.vehicleType}}
      {{bindlcdetail.amount}}
      //and other fields
    </ion-card-content>
  </ion-card>
</ion-item>

而不是单独推送每个值，而是推送包含所有值的对象，如下所示。

 this.bindlcdetails.push({allotedType: 'something',
                         vehicleType: 'something',
                         fromLocation: 'location', 
                         toLocation: 'location',
                         fromDate: 'date',
                         toDate: 'date', 
                         kms: 'something', 
                         amount: 10000});

现在每次都会创建一张新卡片。

Answer 2

首先，您需要更改.html文件。

<ion-item>
  <ion-card class="ion-card" *ngFor="let bindlcdetail of bindlcdetails" >
    <ion-card-content class="ion-card-content">
     {{bindlcdetail.allotedType}}
     {{bindlcdetail.vehicleType}}
     {{bindlcdetail.fromLocation}}
     {{bindlcdetail.toLocation}}
     {{bindlcdetail.fromDate}}
     {{bindlcdetail.toDate}}
     {{bindlcdetail.kms}}
     {{bindlcdetail.amount}}
    </ion-card-content>
  </ion-card>
</ion-item>

您需要在.ts档案

中更改以下内容

  addLocalConveyance(): void {


this.bindlcdetails.push(
  {allotedType: `Allotted Type= ${this.allottedtype}`,
    vehicleType: `vehicle Type= ${this.allottedtype}`,
    fromLocation: `From Location= ${this.allottedtype}`,
    toLocation: `To Location= ${this.allottedtype}`,
    fromDate: `From Date= ${this.allottedtype}`,
    toDate: `To Date= ${this.allottedtype}`,
    kms: `KMs= ${this.allottedtype}`,
    amount:  `Amount= ${this.allottedtype}`}
 );

   this.fromlocation = '';
   this.tolocation = '';
   this.fromdate = null;
   this.todate = null;
   this.kms = null;
   this.amount = null;
 }

无法创建新卡，当我尝试添加新记录时，它添加到同一张卡中不会在Ionic 3中创建新卡

2 个答案: