在@Input上使用切片时调用两次的组件setter。角4

Question

当我使用一个双向数据上的角4结合，将数组传递给其他部件是这样的：

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    arraySend = ['send1', 'send2', 'send3', 'send4']; 
} 

HTML

<app-testing [inputArray]="arraySend"> </app-testing> 

component.ts

并收到像这样的阵列

testing.component.ts

import {Component, Input} from '@angular/core'; 

@Component({ 
    selector: 'app-testing', 
    templateUrl: './testing.component.html', 
    styles: [] 
}) 
export class TestingComponent { 

    private _array: any; 

    @Input() 
    get inputArray(): any { 
     return this._array; 
    } 

    set inputArray(value: any) { 
     console.log(value); 
     this._array = value; 
    } 
} 

HTML

<div> 
    <ul *ngFor="let i of inputArray "> 
     <li>{{i}}</li> 
    </ul> 
</div> 

工作正常，但如果我添加了片管上的标签应用测试是这样的：

<app-testing [inputArray]="arraySend | slice:0:1"> </app-testing> 

test.component.ts中的setter方法被调用两次，我不想要它的两次调用

我真的很感谢帮助，在此先感谢

Answer 1

而不是setter尝试这样。

export class TestingComponent { 
       @Input() private inputArray: any[] = []; 
     } 

如果你想二传手只比你可以创建功能

<app-testing [inputArray]="slice(arraySend)"> </app-testing> 

slice(arraySend){ 
return arraySend.slice(0,1)}