Я очень новичок в ionic, я пытаюсь добавить записи в карты, и он успешно добавлен, но когда я пытаюсь добавить новую запись, которую она добавила в ту же карту, не создает новую карту с данными.Я пробовал использовать вложенный компонент, но он не сработает. Пожалуйста, помогите мне. Ниже мой код

.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
1
Pradnya Bhagat 14 Мар 2018 в 12:35

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;
 }
1
Utpaul 14 Мар 2018 в 11:35

Итак, есть только одна ошибка. Вы поместили *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});

Теперь он будет каждый раз создавать новую карту.

1
Surjeet Bhadauriya 14 Мар 2018 в 10:15