在@Input 上使用切片时调用了两次组件的设置器。角度 4

Posted 2023-02-22

【中文标题】在@Input 上使用切片时调用了两次组件的设置器。角度 4

【英文标题】：Setter of component called twice when using slice on @Input. angular 4

【发布时间】：2017-11-23 07:36:09

【问题描述】：

当我在 angular 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'];

HTML

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

HTML

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

工作正常，但如果我像这样在标签 app-testing 上添加切片管道：

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

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

非常感谢您的帮助，在此先感谢

【问题讨论】：

而不是 pipe ，尝试使用函数 [inputArray]="slice(arraySend)".

【参考方案1】：

而不是像这样尝试设置器。

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

如果你只想要setter而不是你可以创建函数

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

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