多项选择自动完成搜索功能 - 角材料芯片答案

【问题标题】：Multiple Selection Auto Complete Search Functionality - Angular Material Chips多项选择自动完成搜索功能 - 角材料芯片
【发布时间】：2019-09-17 18:04:44
【问题描述】：

我正在使用 Angular 7 和 Angular Material 从 api 获取用户名。为此，我使用了角形材料芯片。这是链接，我在关注：

https://stackblitz.com/angular/jemmxnqdyro?file=app%2Fchips-autocomplete-example.ts

但问题是目前我正在从数组中获取数据。我真正需要的是从此 api 获取用户名：https://jsonplaceholder.typicode.com/users。我很困惑的是如何使用角料芯片以及如何获取数据。

由于我是 Angular 新手，请您帮我实现同样的功能。

如果有人可以对此进行演示，那将非常有帮助。

提前致谢。

【问题讨论】：

您可以使用ObjectMapper 转换您的JSON 并将此JSON 映射到POJO 以获取给定JSON 中的所有userName。
@PawanTiwari：你能给我看一个演示/示例代码吗？我是角度的新手。这真的很有帮助。
我没有使用过材料芯片，但在 Angular 6 中创建和使用 API 调用方面有一些经验。也许this 教程可能会有所帮助？

标签： angular angular-material angular7

【解决方案1】：

HERE IS A WORKING STACKBLITZ EXAMPLE 根据您的要求。

你现在应该做什么：

1- 为您的数据创建一个模型并在服务和订阅中使用它（您可以看到我在订阅方法中使用了“任何”。

2- 相应地更改变量名称（usernameCtrl、allUsernames 而不是 allFruits 等）

3-如果您希望从自动完成选项中删除已选中的项目，请将其从 allUsernames 数组（现在为 allFruits）中删除（ts 中的删除方法）并将其添加到用户名数组中，确保在用户选择删除芯片，你可以尝试其他方法来实现你想要的功能。

要立即将数组更改应用到您的自动完成功能，别忘了this.fruitCtrl.setValue(null);

【讨论】：

澄清一下，既然服务返回Observable，那为什么我们这里不用呢？
我遇到的一个问题是当我输入一些随机输入时，它也会被选中并保存。我怎样才能删除它？有什么相同的建议吗？
我们通过在 ngOnInit 中订阅 observable 来使用它
从组件中移除 add 方法，它将禁止在没有选择的情况下输入文本。
再次感谢。是否可以从下拉部分中删除已选择的用户？现在，即使用户被选中，当我单击输入时，在另一个选择中，选定的用户仍显示在下拉部分中。提前致谢。