如何过滤下拉列表以在列表顶部显示某些值

Question

所以我有一个包含国籍列表的下拉列表，我想在列表顶部显示某些国籍(因为它们是该国家/地区最常见的国籍(。我该怎么做？

这是我的下拉列表：

<select [ngModel]="null" formControlName="nationality" required >
            <option value="null" disabled selected>{{'SelectNationality' | translate}}</option>
            <option *ngFor="let nationality of nationalities">{{nationality._nationalityKey}}</option>
        </select>

例如，我希望国籍日本人

和中国人排在列表的顶部，而不是阿富汗人和美国人，这通常是顶部。

如何过滤它，以便例如列表如下所示：

Chinese, Japanese, Afgan, American. 

取而代之的是：

Afgan, American, Chinese, Japanese 

编辑第一次尝试：

if (this.nationalities.indexOf('Japanese') > 0) {
  this.nationalities.splice(this.nationalities.indexOf('Japanese'), 1);
  this.nationalities.unshift('Japanese');
  }
if (this.nationalities.indexOf('Chinese') > 0) {
  this.nationalities.splice(this.nationalities.indexOf('Chinese'), 1);
  this.nationalities.unshift('Chinese');
  }

不幸的是，这是冗余代码，它仅适用于我最初初始化数组时。如果我用来自服务器的数据填充数组，它就不再有效。为什么以及如何使上面的代码更好？

Answer 1

我建议拆分合并您的数组：

const mostPopularNationalities = ['Japanese', 'Chinese'];
const otherNationalities = this.nationalities
.filter(nationality => !mostPopularNationalities.includes(nationality));
this.nationalities = {...mostPopularNationalities, ...otherNationalities};

Answer 2

在 html 中：

<form action="exampleaction">
  <input type="text" name="firstname" value="english">
  <input type="text" name="lastname" value="african">
  <input type="submit" value="chinesse">
</form>

在 JavaScript 中：

var positions_one = [];
var positions_two = [];
var x = document.getElementsByTagName("input");
for (var i in x) {
    if(x[i].value.includes("chinesse")) {
        positions_one.push(x[i]);
    }
    if(x[i].value.includes("english")) {
        positions_two.push(x[i]);
    }
}

试试这个，这是一个类似的例子...

对于空值，请使用此过滤器...

if(x[i].value !== null || x[i].value !== undefined) { not do nothing};