Пропущенный ключ в петле (угловой 5) - PullRequest
Новая
       6

Пропущенный ключ в петле (угловой 5)

0 голосов
/ 08 сентября 2018

Не могу получить ключ для редактирования или удаления. У меня есть все значения цикла, но не ключ. В консоли у меня нет ошибок

накладная-list.component 

export class InvoiceListComponent implements OnInit {
invoiceList: IInvoice[];

constructor(private invoiceService: InvoiceService) { }

ngOnInit() {
  this.invoiceService.getInvoices().snapshotChanges()
    .map(data  => data.map(datum => datum.payload.toJSON()))
    .map((data : IInvoice[]) => {
        return data.map(datum => {
          let purchases = [];          

          for(let key in datum.purchases) {
              purchases.push(datum.purchases[key]);
          }
          datum.purchases = purchases;
          return datum;
        });
    })
    .subscribe(data => this.invoiceList = data);      
}

onDelete($key: string){
  //console.log($key)
  this.invoiceService.deleteInvoice($key);
 }
}

накладная-list.html 

<table class="table table-sm table-hover table-bordered ">
        <thead class="thead-light">
            <tr>
              <th scope="col">Name</th>
              <th scope="col">Total</th>
              <th scope="col">Vendor</th>
              <th scope="col">Date</th>
              <th scope="col">Purchases</th>
              <th scope="col">Action</th>
            </tr>
          </thead>
      <tbody>
        <tr *ngFor="let invoice of invoiceList">                
          <td>{{invoice.customer.name}} {{invoice.customer.lastname}}</td>
          <td>{{invoice.totalPrice}}</td>
          <td>{{invoice.uid}}</td> 
          <td>{{invoice.createdAt}}</td>   
          <td>
              <li class="list-group-item"
              *ngFor="let purchase of invoice.purchases">
                  {{purchase.product.name}}
              </li>
          </td>
          <td>
            <a class="btn btn-danger text-white" (click)="onDelete(invoice.$key)">
              <i class="fas fa-trash-alt"></i>

            </a>
        </td>    
        </tr>
      </tbody>
    </table>

любая помощь?

вот пример (login => user: user@user.com | pass: user123) StackBlitz

1 Ответ

0 голосов
/ 08 сентября 2018

Проблема в том, что значение $key не определено. Когда вы делаете datum.payload.toJSON(), вы теряете $key

Вместо этого вы можете использовать: 

  ngOnInit() {
    this.invoiceService.getInvoices().snapshotChanges()
      .map(data => data.map(datum => {
        let purchases = datum.payload.toJSON()['purchases'];
        return {
          ...datum.payload.toJSON() as IInvoice,
          $key: datum.key,
          purchases: Object.keys(purchases).map(key => purchases[key])
        }
      }))
      .subscribe(data => this.invoiceList = data);
  }

Используя ...datum.payload.toJSON(), мы можем скопировать все значения из этого объекта, и в строке ниже мы также можем добавить $key. Наконец, строка ниже, которая преобразует purchases из объекта в массив.

Вот демонстрация StackBlitz

...