Question

我创建了一个服务来显示遍历数组的列表。我希望该列表是无限的（滚动时）。因此，我的方法是将显示的数组自身滚动显示。

这行得通，但是由于我决定使用服务，因此无法使其再次运行。

服务：

import { Case } from './case';

export const CASES: Case[] = [
  { name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' }
];

为了遍历此数组，我在case-list component.ts中获取了它：

import {Component, OnInit} from '@angular/core';
import { CASES } from '../mock/mock-cases';

@Component({
  selector: 'app-case-list',
  templateUrl: './case-list.component.html',
  styleUrls: ['./case-list.component.scss']
})
export class CaseListComponent implements OnInit {

  cases = CASES;

  ...

如何再次推送cases，使其包含多个CASES数组？

我已经尝试过：this.cases.push(CASES)，但是这一操作无效。

我希望案件看起来像这样（CASES x3）：

{ name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' },

{ name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' },

{ name: 'Diesel', image: '/assets/images/diesel.png', image2: '', image3: '', link: '' },
  { name: 'WeWork Berlin', image: '/assets/images/berlin.png', image2: '', image3: '', link: '' },
  { name: 'Fritzhansen', image: '/assets/images/fritzhansen.png', image2: '', image3: '', link: '' },
  { name: 'Savum', image: '/assets/images/savum.png', image2: '/assets/images/savum/savum-logo.png',
    image3: '/assets/images/savum/savum-iphone.png', link: '' },
  { name: 'Eskay', image: '/assets/images/eskay.png', image2: '', image3: '', link: '' },
  { name: 'Diesel', image: '/assets/images/diesel-snd.png', image2: '', image3: '', link: '' },
  { name: 'Mobilia', image: '/assets/images/mobilia.png', image2: '', image3: '', link: '' },
  { name: 'Rarekind', image: '/assets/images/rarekind.png', image2: '', image3: '', link: '' }

Answer 1

您应该尝试this.cases.push(...CASES)。称为传播语法。

对于函数调用：

myFunction(...iterableObj);
For

数组文字或字符串：

[...ite`rableObj, '4', 'five', 6];

对于对象文字（ECMAScript 2018中的新增功能）：

let objClone = { ...obj };

Angular-推送服务阵列本身

1 个答案: