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

Question

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

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

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

你有没有可以帮我实现同样的，因为我刚开始有角度。

如果有人可以在此展示演示，那将非常有用。

提前致谢。

Answer 1

HERE IS A WORKING STACKBLITZ EXAMPLE根据您的要求。 你现在应该做什么： 1-为您的数据创建一个模型，并在服务和订阅中使用它（您可以看到我在我的订阅方法中使用'any'。 2-相应地更改变量名称（usernameCtrl，allUsernames而不是allFruits等。） 3-如果您希望从自动完成选项中删除项目（如果已经选中），请从allUsernames数组（现在为allFruits）中删除它（在ts中删除方法）并将其添加到用户名数组中，确保在用户选择删除芯片，您可以使用其他方法来实现所需的功能。

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