Почему я не могу корректно обновить значение элемента в цикле Array.forEach () в Angular 7? - PullRequest
Новая
       8

Почему я не могу корректно обновить значение элемента в цикле Array.forEach () в Angular 7?

0 голосов
/ 05 ноября 2018

Я тестирую Material Table (mat-table) на Angular 7, вот странная проблема, с которой я столкнулся.

Отправьте запрос в jsonplaceholder за поддельные данные в users.service 

export class UsersService {
    API_BASE = 'https://jsonplaceholder.typicode.com/users';

    constructor(private http: HttpClient) {}

    getUsers(): Observable<object> {
        const url = this.API_BASE;
        return this.http.get(url);
    }
}

Поскольку jsonplaceholder возвращает только 10 строк данных, поэтому я объединяю данные для большого массива, скажем, 30 строк, для удобства тестирования функции разбивки на страницы. Тем временем обновите поле «id» с помощью итеративного индекса, чтобы «id» выглядел как 1,2,3 ... 30 вместо 1,2,3 ... 10,1,2,3 ... 10,1 , 2,3 ... 10, что является результатом конкатенации, вот и все, ничего особенного.

users.component: 

ngOnInit(): void {
    this.userService.getUsers().subscribe((users: UserData[]) => {
        users = users.concat(users, users);
        users.forEach((user, index) => (user.id = index +1));
        console.log(users);
        this.dataSource.data = users;
    });
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
}

Хотя таблица выглядит красиво, но столбец 'id выглядит странно, они не 1,2,3 ... 30 последовательно, а 21,22,23 ... 30,21,22, 23 ... 30,21,22,23 ... 30

enter image description here

Я попытался распечатать user.id внутри цикла forEach, все хорошо. 

    users.forEach((user, index) => {
        user.id = index + 1;
        console.log(user.id);
    });

enter image description here

Где я ошибся с этим? Любая подсказка? Спасибо.

P.S. API, используемый в коде: https://jsonplaceholder.typicode.com/users

1 Ответ

0 голосов
/ 05 ноября 2018

даже если у вас есть 30 элементов массива после конкатенации массива дважды, у вас все еще есть только 10 уникальных объектов. Объект за пользователями [20] совпадает с пользователями [0], поэтому вы переопределяете идентификатор уже обработанных объектов с индекса 10 на 29

Вы можете исправить это, создав копию каждого объекта. Есть много способов сделать это. очень простой способ сериализации и десериализации с использованием JSON.stringify и JSON.parse: 

users.forEach(user => users.push(JSON.parse(JSON.stringify(user))));
...