PrimeNG多选中的多选显示空值答案

【问题标题】：Multiselect in PrimeNG multi select showing empty valuesPrimeNG多选中的多选显示空值
【发布时间】：2021-08-08 02:44:11
【问题描述】：

我有一个多选组件：

<p-multiSelect class="multiple-select" display="chip" [options]="allTags" name="selectedTags" [(ngModel)]="selectedTags" optionLabel="tag" optionValue="tag"></p-multiSelect>

allTags 数组中的单个标签：

{ tag: 'someTag' }

且 selectedTags 数组包含字符串。添加标签时，它可以完美运行。当我想预选一些标签时会出现问题。

  preselectTags(tags: string[]) {
    tags.map(x => this.selectedTags.push(x));

  }

我尝试过 forEach，并且用简单的重新分配而不是 array.map，但每次我看到这样的东西：

Console.logging selectedTags 在填充后返回一个正确字符串的数组。我做错了什么？

PS。感谢您的提前。

【问题讨论】：

标签： angular typescript primeng multi-select

【解决方案1】：

如果我没记错的话，我认为 selectedTags 数组应该与 allTags 具有相同的结构，因此，当您进行推送时，您必须构建该结构。

preselectTags(tags: string[]) {
   tags.map(x => this.selectedTags.push({val:x}));
}

希望对您有所帮助，如果没有，请提供每个数组结构的打印。问候

【讨论】：

您好，感谢您的回答。在文档中，我也在其他多个实例中看到，allTags 是对象； { tag: 'someTag'}，绑定到它的数组是一个字符串数组。 ['tag1, 'tag2', 'tag3']。就像我说的，当我想添加礼物时，它非常有效，当我何时编辑礼物时，问题就出现了，这迫使我预先选择值。希望这是有道理的。

【解决方案2】：

您需要查找选项以过滤掉不需要的项目/选择标签..

所以根据标签数组是什么，你可以遍历它们，或者尝试：

preselectTags(tags: string[]) {

  this.selectedTags = tags.map(x => this.allTags.find(y => y.val === x.val));
}

对上述数组的结构提供帮助会更容易......

【讨论】：

感谢您的回答。我已经收到了我想要的选项，它们是从 allTags 数组本身生成的。 tags.map(x => this.selectedTags.push(x)); 是我这样做的地方。就像我说的，如果我采用映射的“selectedTags”值，并最初将它们添加到变量中，比如selectedTags = ['tag1', 'tag2', 'tag3'] ，它就可以工作。当我 console.log 上面代码的结果时，数组是相同的，但不知道为什么这也不起作用。