是否可以删除或禁用或隐藏angular4中选择属性的下拉选项

Question

我在 angular4 中编写了我的代码，我想隐藏或禁用出现在下拉列表中的重复选项。你能告诉我隐藏它的可能方法吗？

我尝试从 -

实现代码

How to Remove duplicate dropdown option elements with same value

assign.component.ts

  import * as $ from 'jquery';
  import { JQuery } from 'jquery';


   export class AssignComponent implements OnInit {

   seen = {};

  getRolesList() {
   var url = config.url;
   var port = config.port;
    this.http.post("http:....
   .map(result => this.rolesList = result.json())
   .subscribe((res: Response) => {


 JQuery('.updateMappingUserRole').children().each(function() {
  var txt = JQuery(this).attr('value');
  if (this.seen[txt]) {
      JQuery(this).remove();
  } else {
      this.seen[txt] = true;
  }
  });

  }

assign.component.ts

    <div class="col-md-6">
          <div class="form-group">
            <label for="role"> Role: </label>
            <select class="form-control" name="updateMappingUserRole"

    [formControl]=
     "updateMappingRoleForm.controls['updateMappingUserRole']"
            [(ngModel)]="updateMappingUserRole" 
      (change)="getRoleID(updateMappingUserRole)" id="role">
            <option  > {{updateMappingUserRole}}</option>
              <option  *ngFor="let i of rolesList">{{i.ROLE_CD}} 
              </option>

              </select>
          </div>
        </div>
      </div>

Answer 1

.map(result => this.removeDuplicates(result.json(), this.rolesList));

removeDuplicates(json: any[], destination: any[]) {
  destination = json.reduce((p, n) => {
    // If role already in array, don't push
    if (!p.includes(n)) { p.push(n); }
    return p;
  }, []);
}

此函数将使用 reduce 函数转换 HTTP 调用返回的数组。

编辑：reduce 的工作原理 (documentation)

对于 Javascript 的新手，或者不知道 reduce 函数的人：

reduce 是一个将遍历数组并对其进行转换的函数。它的签名是

reduce(callback(previousElement, nextElement, currentIndex, arr), startingValue);

让我们举个例子：将一个数字数组转换成它们的平方值。

const initial = [1, 2, 3, 4];
const transformed = initial.reduce((p, n) => {
  p.push(n * n);
  return p;
}, []); // Will give [1, 4, 9, 16]

现在让我们分解一下：

在第一次迭代中，我们位于数组的第一项：1。

reduce 函数的初始值是一个空数组。
在回调中，这将给出

p = [], n = 1

所以，我们将 1 的平方值压入数组，然后返回数组（强制）。

下一次迭代来了：回调的值是

p = [1], n = 2

我们做同样的过程，在第三次和第四次迭代中，我们会有这个

3 : p = [1, 4], n = 3
4 : p = [1, 4, 9], n = 4

一旦函数完成（nextElement 没有更多值可取），它会返回 previousElement 的最后一个值，即转换后的数组。