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?

0
Apollo 24 styczeń 2022, 17:41

2 odpowiedzi

Najlepsza odpowiedź

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>
1
Zulfe 24 styczeń 2022, 18:10
Ach, to mądre. Wypróbuję to. Dziękuję!
 – 
Apollo
24 styczeń 2022, 18:10

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.

0
SomeStudent 24 styczeń 2022, 17:47
Przez zmianę rozumiem, kiedy przesuwam jeden element od lewej do prawej (patrz: primefaces.org/primeng /showcase/#/picklist) element, który przenoszę, zostaje usunięty ze źródła i dodany do celu. W ten sposób PickList zmienia zawartość właściwości wejściowych.
 – 
Apollo
24 styczeń 2022, 17:54
Poproś również, aby komponent wyprowadzał wariant JSON tablicy źródłowej, aby upewnić się, że się nie zmieni. Założę się, że tak nie jest, a zamiast tego pod maską primeNG ma dwie tablice jedna na to co po lewej, druga na to co po prawej
 – 
SomeStudent
24 styczeń 2022, 17:59
Ten wynik był tylko do wizualizacji. Tutaj to nie ma znaczenia. Ale znalazłem to: github.com /primefaces/primeng/blob/master/src/app/components/… Parametry @Input() zostaną zmienione. Nie sądzę, żeby to była dobra praktyka.
 – 
Apollo
24 styczeń 2022, 18:01