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

Question

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

我尝试从执行代码-

如何删除具有相同值的重复的下拉选项元素

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工作（ 文档 ）

对于Java语言的新手，或不了解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 ，这是变换数组。