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

Question

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

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

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

你能帮我实现同样的功能吗，因为我是 angular 的新手。

如果有人可以在这方面展示演示，那将非常有帮助。

提前致谢。

Answer 1

这是根据您的要求工作的 STACKBLITZ 示例。

您现在应该做什么：

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

。2- 相应地更改变量名称（usernameCtrl, allUsernames 代替） allFruits 等。）

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

要将数组更改立即应用于自动完成，请不要忘记 this.fruitCtrl.setValue(null);