如果有重复，则在下拉列表中仅显示一个值答案

【问题标题】：Show Only One Value In Dropdown If There are Duplicates如果有重复，则在下拉列表中仅显示一个值
【发布时间】：2025-12-08 13:20:03
【问题描述】：

您好，我正在尝试按位置获取打印机的信息。因此，如果我在同一位置有几台打印机，我会在下拉列表中看到它们，但如果它们是相同的位置，我实际上只想在下拉列表中看到一个位置。我知道我可以在数据库级别解决这个问题并添加关系，但也许没有它有办法做到这一点？

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>

【问题讨论】：

这能回答你的问题吗？ ngFor full list and unique list
我如何在我的项目中应用它=/？
而且由于某种原因它不工作......
创建一组您的位置数组：new Set(myLocationsArray) 并将其传递给您的 select 元素
你能告诉我代码吗？我做到了，但它不工作我错过了什么？？

标签： javascript html asp.net angular typescript

【解决方案1】：

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

【讨论】：

首先谢谢你，但我仍然收到错误没有重载匹配这个调用。（响应“对象”类型的参数下的红色下划线不可分配给“Iterable”类型的参数

【解决方案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)

祝你好运！

【讨论】：