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

Question

I have written my code in angular4 and i want to hide or disable a repetitive option that appears in the dropdown. Can you please let me know the possible way to hide it .

I tried implementing codes from -

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;
  }, []);
}

This function will transform your array returned by the HTTP call with the reduce function.

EDIT : How reduce works ( documentation )

For newcomers in Javascript, or people not knowing the reduce function :

reduce is a function that will iterate over the array and transform it. Its signature is

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

Let's use an example : transform an array of numbers into their square values.

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

Now let's break it down :

On the first iteration, we are on the first item of the array : 1.

The initial value given to the reduce function is an empty array.
In the callback, this will give

p = [], n = 1

So, we push the square value of 1 into the array, then return the array (mandatory).

The next iteration comes : the values of the callback are

p = [1], n = 2

We do the same process, and on the third and fourth iterations, we will have this

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

Once the function is finished ( nextElement has no more value to take), it returns the last value of previousElement , which is the transformed array.