在@Input上使用片时，组件的Setter调用了两次。角4

Question

当我在角4上使用双向数据绑定时，将数组传递给其他组件，如下所示：

component.ts

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'];
}

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

然后像这样接收数组

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;
    }
}

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

工作正常，但是如果我在标记应用程序中添加了切片管道，那么测试如下：

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

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

我真的很感谢你的帮助，谢谢

Answer 1

而不是策划人，试试这样吧。

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

如果您只想要setter而不能创建函数

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

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