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

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的最后一个值，即变换后的数组。