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

Question

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

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

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

你能帮我实现同样的，因为我是角度新手。

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

提前致谢。

标签： angularangular-materialangular7

Answer 1

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

您现在应该做什么：

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

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

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

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