Показывать только одно значение в раскрывающемся списке, если есть дубликаты

Question

Привет, я пытаюсь получить информацию о принтерах по месту нахождения. поэтому, если у меня несколько принтеров в одном месте, я вижу их оба в раскрывающемся списке, но на самом деле я хочу видеть только одно местоположение в раскрывающемся списке, если они находятся в одном месте. Я знаю, что могу решить эту проблему на уровне базы данных и добавить отношения, но, может быть, есть способ обойтись без этого?

import {
  Component,
  OnInit
} from '@angular/core';
import {
  HttpClient
} from '@angular/common/http';
import {
  DomSanitizer
} from '@angular/platform-browser';
import {
  Values
} from '../Models/Values';




@Component({
  selector: 'app-value',
  templateUrl: './value.component.html',
  styleUrls: ['./value.component.css']
})


export class ValueComponent implements OnInit {
  selectedPrinter: Values;
  values: any;





  constructor(private http: HttpClient, public sanitizer: DomSanitizer) {}



  ngOnInit() {
    this.getValues();


  }

  getValues() {
    this.http.get('http://localhost:5000/api/values/').subscribe(response => {
      this.values = response;
    }, error => {
      console.log(error);
    })
  }





}

<H2>Printer Manager</H2>
<div id="selectCompanyDiv">
  <div class="col-12 col-md-3 col-xl-2 mt-5 bd-sidebar">
    <label for="">Select Location</label>
    <select class="form-control" [(ngModel)]="selectedPrinter">
      <option *ngFor="let each of values " [ngValue]="each.location">{{each.location}} </option>
      <!-- {{each.specificLocation}} -->
    </select>
    <!-- Search -->
    <!-- <input id="test" *ngFor="let each of values " class="form-control" type="search" placeholder="Search"  {{values.location}}>

         <button ondblclick="Access()">click here 
        </button> -->
  </div>
  <br>
  <br>
  <div>
    <div *ngFor="let value of values" id="mainDiv">
      <div *ngIf="value.location===selectedPrinter">
        <span>HostName: {{value.hostName}}</span>
        <br>
        <!-- <span>Location: {{value.location}}</span> -->

        <span>Manufacturer: {{value.manufacturer}}</span>
        <br>
        <span>IP: {{value.ip}}</span>
        <br>
        <h2>{{value.location}}</h2>
        <span>{{value.specificLocation}}</span>
        <br>
        <a target="_blank" [href]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')">Full view</a>
        <div>
          <div *ngIf="value.model==='J480'" class="outerFrame">
            <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrotherj480" scrolling="no"></iframe>
          </div>
          <div *ngIf="value.model==='6530DW'" class="outerFrame">
            <iframe [src]="sanitizer.bypassSecurityTrustResourceUrl('http://'+value.ip+'/general/status.html')" id="inneriframeBrother6530DW" scrolling="no"></iframe>
          </div>
        </div>
      </div>
    </div>

Answer 1

getValues() {
    this.http.get('http://localhost:5000/api/values/').subscribe(response => {
      this.values = [...new Set(response)];
    }, error => {
      console.log(error);
    })
  }

Answer 2

Я бы сделал следующее:

В getValues ​​():

 getValues() {
    this.http.get('http://localhost:5000/api/values/').subscribe(response => {
      this.values = Array.from(new Set(response));
    }, error => {
      console.log(error);
    })
  }

Взгляните на документацию Array.from и Array.from (set)

Удачи!