Setter du composant appelé deux fois lors de l'utilisation de la tranche sur @Input. angulaire 4

Question

lorsque j'utiliser un sur quatre angulaire de deux données de manière contraignante, le passage d'un réseau à un autre composant comme suit:

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> 

et recevoir le tableau comme ceci

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> 

fonctionne très bien, mais si j'ajoute le tuyau de tranche sur l'application-test de tag comme ceci:

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

la méthode setter dans testing.component.ts est appelée deux fois, je ne veux pas qu'elle s'appelle deux fois

J'apprécie vraiment l'aide, merci d'avance

Answer 1

au lieu de setter essayer comme ça.

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

si vous voulez poseur seulement que vous pouvez créer la fonction

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

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