Mam aplikację Angular z PrimeNG. Używam składnika PickList w następujący sposób:
<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>
Sam komponent jest prosty:
@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",
];
}
}
Nie używam tutaj dwukierunkowego wiązania, więc w jaki sposób PrimeNG aktualizuje źródło i właściwość docelową?
W moim głównym źródle i miejscu docelowym projektu są właściwości @Input(), a zatem nie chcę, aby jakiś podskładnik się z nim bawił. Jak to możliwe, że PrimeNG zmienia te wartości?
2 odpowiedzi
Możesz zreplikować wartości source i target w swoim HelloComponent, a następnie użyć tych kopii dla bazowego widżetu PrimeNG PickList. Pozwala to na przekazywanie aktualizacji do HelloComponent, które zostaną przekazane do widżetu PrimeNG, ale zmiany w tych tablicach w widżecie PrimeNG nie wpłyną na oryginalną tablicę wejściową.
Wierzę w twój oryginalny kod, oryginalna tablica, która jest przekazywana jako dane wejściowe do HelloComponent, a następnie przekazywana do widżetu PrimeNG, jest przekazywana przez "kopia referencji."
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>
Szanse są takie, że w komponencie dla primeNG znajduje się odbiornik OnChange i ogólnie mówiąc, gdy coś zmienia się w jednym @Input, wyzwala zdarzenie onChange.
Jak mówi dokument Angulara (https://angular.io/api/core/OnChanges) za każdym razem, gdy zmienia się właściwość powiązana z danymi, jest ona uruchamiana onChange. W tym przypadku cel jest właściwością związaną z danymi.
Co masz na myśli przez zmianę wartości? Jeśli wybierzesz foo, zmieni się w foobar? Pod maską primeNG nie manipuluje danymi, które przekazałeś, prawdopodobnie ma swój własny wewnętrzny magazyn, w jaki sposób wyświetla dane dla swojego komponentu listy selektorów.