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

Question

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

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

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

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

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

谢谢。

Answer 1

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

您现在应该做什么：

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

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

3-如果您希望从自动完成选项中删除某项（如果已选中），请从allUsernames数组（现在为allFruits）中删除它（在ts中删除方法），然后将其添加到usernames数组中，确保当用户选择删除芯片，则可以尝试其他方法来实现所需的功能。

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