Angular увеличение идентификатора элемента в почтовом запросе

Question

У меня проблема с кодом Angular, когда я пытаюсь сделать почтовый запрос . Основная проблема с удостоверением личности. Я инициализирую свой массив listItems и обновляю его, когда добавляю в него новый элемент списка. Однако я не могу добавить идентификатор.

Есть 2 проблемы:

1. Я не могу добавить идентификатор через массив listItems, потому что он не определен,
   , несмотря на тот факт, что я ранее инициализировал его в OnInit

2. ID не появляется на странице, один раз, когда я обновляю sh. И когда я пытаюсь удалить элемент, он выдает ошибку, однако, когда я обновляю sh страницу, я думаю, Angular добавляет идентификатор самостоятельно, и это вроде работает

Вот код

list-main.component.ts

import { Component, OnInit } from '@angular/core';
import { ListItem } from '../../models/list-item.interface';
import { ListDashboardService } from '../../list-dashboard.service';

@Component({
    selector: 'list-main',
    styleUrls: ['list-main.component.scss'],
    template: `
        <div class="title">
            <h1>Database To-do Angular</h1>
        </div>

        <div class="form">
            <list-form
                [blankListItem]="listItem"
                (addNewListItem)="addItem($event)">
            </list-form>
        </div>

        <!-- <div
            *ngFor="let item of listItems">
            {{ item.title | json }}
        </div> -->

        <div>
            <list-item
                *ngFor="let item of listItems"
                [listItem]="item"
                (delete)="deleteItem($event)">
            </list-item>
        </div>        
    `
})

export class ListMainComponent implements OnInit {
    listItems: ListItem[];
    listItem: ListItem;

    constructor(private listDashboardService: ListDashboardService) {}

    ngOnInit() {
        this.listDashboardService
            .getAllListItems()
            .subscribe((data: ListItem[]) => this.listItems = data);

        this.listItem = {
            // id: this.listItems.length,
            id: undefined,
            title: '',
            isChecked: true
        }
    }

    addItem(listItem: ListItem) {
        console.log(this.listItem);

        this.listDashboardService
            .addListItem(listItem)
            .subscribe((data: ListItem) => {
                this.listItems.push(listItem);
            });

        console.log(this.listItems);
    }

    deleteItem(listItem: ListItem) {
        this.listDashboardService
            .deleteListItem(listItem)
            .subscribe((data: ListItem) => {
                this.listItems = this.listItems.filter(
                    (el: ListItem) => el.id !== listItem.id
                );
            });
    }
}

list-dashboard.service.ts

import { Http, Response } from "@angular/http";
import { Injectable } from "@angular/core";

import { Observable } from "rxjs/Observable";
import 'rxjs/add/operator/map';

import { ListItem } from "./models/list-item.interface";

const LIST_API: string = '/api/listItems';

@Injectable()
export class ListDashboardService {
    constructor(private http: Http) {}

    getAllListItems(): Observable<ListItem[]> {
        return this.http
            .get(LIST_API)
            .map((response: Response) => response.json())
    }

    addListItem(listItem: ListItem): Observable<ListItem> {
        return this.http
            .post(LIST_API, listItem)
            .map((response: Response) => response.json());
    }

    deleteListItem(listItem: ListItem): Observable<ListItem> {
        return this.http
            .delete(`${LIST_API}/${listItem.id}`)
            .map((response: Response) => response.json());
    }
}

Answer 1

Похоже, вы хотите генерировать идентификатор на стороне клиента, а не на сервере. Итак, сначала вам нужен способ создания уникальных идентификаторов. Наивной реализацией может быть

let lastId = 0;

export const getUniqueId = () => lastId++;

Это может быть достаточно для локального тестирования, но не очень надежно (например, оно перезапускает последовательность идентификаторов при перезагрузке страницы). Если вы хотите сделать это в реальном приложении, я бы предложил использовать что-то вроде uuid (https://www.npmjs.com/package/uuid)

Хорошо, теперь вам нужно установить уникальный идентификатор для каждого списка элемент, который вы создаете:

class ListMainComponent {

   addItem(listItem: ListItem) {
        const listItemWithId = {
          ...listItem,
          id: getUniqueId()
        }

        this.listDashboardService
            .addListItem(listItemWithId)
            .subscribe(_ => {
                this.listItems.push(listItemWithId);
            });
    }
}