Tengo una aplicación Angular con PrimeNG. Estoy usando el componente PickList así:
<p-pickList [source]="source" [target]="target" > <ng-template let-item pTemplate="item"> {{item | json}} </ng-template> </p-pickList> <h2>source</h2> <ul> <li *ngFor="let s of source">{{s|json}}</li> </ul> <h2>target</h2> <ul> <li *ngFor="let t of target">{{t|json}}</li> </ul>El componente en sí es sencillo:
@Component({ selector: 'app-hello', templateUrl: './hello.component.html', styleUrls: ['./hello.component.css'], }) export class HelloComponent { source: string[]; target: string[] = []; constructor() { this.source = [ "foo", "bar", "baz", ]; } }No uso el enlace bidireccional aquí, entonces, ¿cómo actualiza PrimeNG la propiedad de origen y destino?
En el origen y el destino de mi proyecto principal están las propiedades @Input() y, por lo tanto, no quiero que algún subcomponente juegue con él. ¿Cómo es posible que PrimeNG cambie esos valores?
Puede replicar los valores de source y target en su HelloComponent y luego usar estas copias para el widget PrimeNG PickList subyacente. Esto le permite pasar actualizaciones a HelloComponent que se comunicarán al widget de PrimeNG, pero los cambios en esas matrices dentro del widget de PrimeNG no afectarán a la matriz de entrada original.
Creo en su código original, la matriz original que se pasa como entrada a HelloComponent , luego se pasa al widget PrimeNG, se pasa por una "copia de una referencia".
private _sourceOptions: string[]; @Input set sourceOptions(options: string[]) { // Ensure we're not passing a reference to the array down because it may still // be changed. Create a new array with the same items. This can also help with // firing change detection in the PrimeNG widget. this._sourceOptions = options.slice(0); } get sourceOptions(): string[] { return this._sourceOptions; } <!-- Component template file --> <p-pickList [source]="sourceOptions" [target]="target"> <ng-template let-item pTemplate="item"> {{item | json}} </ng-template> </p-pickList>Lo más probable es que dentro del componente para primeNG haya un oyente OnChange y, en términos generales, cuando algo cambia dentro de una @Input, desencadena un evento onChange.
Como dice el documento de Angular ( https://angular.io/api/core/OnChanges ) cada vez que cambia una propiedad enlazada a datos, se activa onChange. En este caso, el destino es una propiedad enlazada a datos.
Además, ¿a qué te refieres con cambiar valores? Si selecciona foo , se convierte en foobar . Debajo del capó, primeNG no está manipulando los datos que le pasó, probablemente tenga su propia tienda interna de cómo muestra los datos para su componente de lista de selección.