Angular Массив Разделить в новый массив

Question

У меня есть такой массив:

Модель:

export class Total {
    Id: number;
    Products: string;
    LastUpdated: Date;
}

У меня есть список этого с:

myList[] = this.service.getProducts().toPromise();

Как сделать новый массив только получить продукты и LastUpdated из myList?

myProducts[] = ["prod1","prod2","prod3","prod3"];
myDates[] = ["2020-03-01","2020-03-02","2020-03-05","2020-03-06"];

Answer 1

Используйте функцию map(). Попробуйте следующее

const myProducts = this.myList.map(item => item.Products);
const myDates = this.myList.map(item => item.LastUpdated);

Answer 2

Используя map, вы могли бы достичь результата, но вам нужно было бы дважды повторить весь массив, что может быть плохо для больших массивов ...

Таким образом, вы можете использовать reduce вместо этого.

const [myProcucts, myDates]: [string[], Date[]] = this.myList.reduce((total: [string[], Date[]], item: Total) => {
        // push product value to the array of Products
        total[0].push(item.Products);

        // push lastUpdated value to the array of lastUpdated
        total[1].push(item.LastUpdated);
        return total
    }, [[],[]]);

Answer 3

Я предполагаю, что здесь this.service.getProducts().toPromise(); дает вам тип Promise<Total[]> (не массив), поэтому вы должны написать myList вместо myList[]. Таким образом, для продуктов и дат лучше / безопаснее сохранять их типа Promise<string[]>.

const myProducts = this.myList.then(list => list.map(item => item.Products));
const myDates = this.myList.then(list => list.map(item => item.LastUpdated));

Если вы уверены, что вам нужен тип string[], вы можете дождаться этого обещания:

this.myList.then(list => {
    this.myProducts = list.map(item => item.Products);
    this.myDates = list.map(item => item.LastUpdated);
});