PrimeNG 的 p-pickList 是否正在更改源和目标？

Question

我有一个带有 PrimeNG 的 Angular 应用程序。我正在像这样使用 PickList 组件：

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

组件本身很简单：

@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",
    ];
  }
}

我这里没有使用双向绑定，那么 PrimeNG 如何更新源和目标属性？

在我的主要项目源和目标上是 @Input() 属性，因此我不希望某些子组件与它一起 fiddle。 PrimeNG 怎么可能改变这些值？

Answer 1

很可能在 primeNG 的组件中有一个 OnChange 侦听器，一般来说，当一个 @Input 中的某些内容发生变化时，它确实会触发一个 onChange 事件。

正如 Angular 文档所说 (https://angular.io/api/core/OnChanges) 任何时候数据绑定属性更改它都会触发 onChange。在这种情况下，目标是数据绑定属性.

另外，你所说的改变值是什么意思？如果你 select foo 它变成 foobar？在幕后，primeNG 不会处理您传递给它的数据，它可能有自己的内部存储，用于显示其选择器列表组件的数据。

Answer 2

您可以在 HelloComponent 中复制 source 和 target 的值，然后将这些副本用于底层 PrimeNG PickList 小部件。这允许您将更新传递给 HelloComponent，这些更新将向下传达给 PrimeNG 小部件，但对 PrimeNG 小部件中的那些数组的更改不会影响原始输入数组。

我相信你的原始代码，原始数组作为输入传递给 HelloComponent，然后传递给 PrimeNG 小部件，由 "copy of a reference."

传递

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>

PrimeNG 的 p-pickList 是否正在更改源和目标？

Is PrimeNG's p-pickList changing source and target?

javascript

primeng

angular

PrimeNG 的 p-pickList 是否正在更改源和目​​标？

Is PrimeNG's p-pickList changing source and target?

javascript

primeng

angular

PrimeNG 的 p-pickList 是否正在更改源和目标？