如何通过 rest 创建一个选择器来仿射视图（如过滤器）api

Question

我需要做一个包含世界所有大陆的选择器。如果用户单击某个大陆，则视图必须仅显示该大陆的国家/地区。

我正在获取 https://restcountries.eu 上的国家/地区。

<h2>Countries</h2>
<div >
  <nav class="navbar">
    <input class="form-control shadow-sm p-3 mb-5 bg-white rounded" type="text" name="search" [(ngModel)]="filter">

  <select id="region" class="shadow-sm p-3 mb-5 bg-white rounded">
      <option value=""></option>
      <option value="afr" routerLink="/region/africa">Africa</option>
      <option value="ame">Americas</option>
      <option value="asi">Asia</option>
      <option value="eur">Europe</option>
      <option value="oce">Oceania</option>
  </select>
</nav>

  <tr *ngFor="let country of countries | filter:filter; let i = index">
      <td>{{country.name}}</td>
      <td>{{country.population}}</td>
      <td>{{country.region}}</td>
      <td>{{country.capital}}</td>
  </tr>
</div>

Answer 1

在我看来，你应该根据应用的过滤器迭代已经过滤的国家。

用户选择过滤器
根据所选大洲过滤国家
显示过滤后的国家

Answer 2

如果我明白你想做什么，你应该这样做：

  <select id="region" class="shadow-sm p-3 mb-5 bg-white rounded" (change)='yourFilterFunction($event)>

"yourFilterFunction($event)" 更新国家数组

如何通过 rest 创建一个选择器来仿射视图（如过滤器）api

How to create a selector to affine view (like a filter) through rest api

rest

angular

angular6