Javascript 在选择框/下拉列表中仅显示唯一值

我试图从SQLServerDB获取数据，并将响应放入前端的字段中。我正在获取数据，但响应中的某些字段不是唯一的，并且在下拉列表中显示重复的值。我的组件如下所示

export class ReportingFilterComponent implements OnInit {
 ShipmentList: ShipmentByProject[];
 output= [];
 entityUrl = 'ShipmentDetail/GetByReportingProject?repPrj=000634';

 constructor(service: DataService) {
 this.ShipmentList = [];
 service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {this.ShipmentList = x });
  }


 ngOnInit() {
  var flags= [];
  var l = Array.isArray(this.ShipmentList) ? this.ShipmentList.length : 0, i;
   for( i=0; i<l; i++) {
    if( flags[this.ShipmentList[i].customer_shipto_name]) continue;
    flags[this.ShipmentList[i].customer_shipto_name] = true;
    this.output.push(this.ShipmentList[i].customer_shipto_name);
  }}

即使

ShipmentList

上有数据，我在

输出中也没有得到任何东西。
所以抛出的错误在
ngOnInit
块中。
此.ShipmentList是否未定义

此外，要访问角度模板中的
输出
，它需要是component类的属性。在类的顶部，您应该放置
public output=[]
并将其作为目标。
这样抛出的错误就位于
ngOnInit
块中。
此.ShipmentList是否未定义

此外，要访问角度模板中的
输出
，它需要是component类的属性。在类的顶部，您应该放置
public output=[]
并将其作为目标。
假设您的
服务.get[]>
调用返回一个承诺，则在承诺得到解决之前，
this.ShipmentList
似乎是未定义的。您可以将该值初始化为空数组以消除错误，或者在尝试读取长度之前检查是否存在错误

您可以提前初始化
ShipmentList
：

classyourclass{
ShipmentList=[]；
构造函数（）{
// ...
}
}

或者在构造函数中初始化它：

constructor（）{
this.ShipmentList=[]；
service.get（this.entityUrl）.subscribe（x=>
{this.ShipmentList=x}）；
}
}

或在读取长度之前检查：

var l=Array.isArray（this.ShipmentList）？this.ShipmentList.length:0；
假设您的
服务.get[]>
调用返回承诺，则在承诺解决之前，
此.ShipmentList
似乎是未定义的。您可以将该值初始化为空数组以消除错误，或者在尝试读取长度之前检查是否存在错误

您可以提前初始化
ShipmentList
：

classyourclass{
ShipmentList=[]；
构造函数（）{
// ...
}
}

或者在构造函数中初始化它：

constructor（）{
this.ShipmentList=[]；
service.get（this.entityUrl）.subscribe（x=>
{this.ShipmentList=x}）；
}
}

或在读取长度之前检查：

var l=Array.isArray（this.ShipmentList）？this.ShipmentList.length:0；
您正在使用尚未加载的数据。您在
ngOnInit
方法中拥有的内容应该在上面的subscribe中

正如@Ash所提到的，
output
属性应该是class属性，而不是在
ngOnInit
中定义的

注1：不要使用
var
，而是使用
const
或
let
。因为这两个存在于他们所在的街区

注2：在Typescript中使用camelCase，例如
ShipmentList
应该是
ShipmentList
您使用的是尚未加载的数据。您在
ngOnInit
方法中拥有的内容应该在上面的subscribe中

正如@Ash所提到的，
output
属性应该是class属性，而不是在
ngOnInit
中定义的

注1：不要使用
var
，而是使用
const
或
let
。因为这两个存在于他们所在的街区

注2：在Typescript中使用camelCase，因此例如
ShipmentList
应该是
ShipmentList
您可能希望在从服务/api返回数据时显示ShipmentList的数据

此外，您还需要输出实例变量。像下面这样。试着调试你的代码

export class ReportingFilterComponent implements OnInit {
  ShipmentList: ShipmentByProject[];
  entityUrl = 'ShipmentDetail/GetByReportingProject?repPrj=000634';
  output = [];

  constructor(private service: DataService) {
  }

  ngOnInit() {
    const flags = [];
    this.service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {
      if (x && x.length > 0) {

        this.ShipmentList = x;
        for (let i = 0; i < this.ShipmentList.length; i++) {
          if (flags[this.ShipmentList[i].customer_shipto_name]) continue;
          flags[this.ShipmentList[i].customer_shipto_name] = true;
          this.output.push(this.ShipmentList[i].customer_shipto_name);
        }
      }

    });
  }
}

导出类ReportingFilterComponent在NIT上实现{
ShipmentList:ShipmentByProject[]；
entityUrl='ShipmentDetail/GetByReportingProject？repPrj=000634'；
输出=[]；
构造函数（专用服务：数据服务）{
}
恩戈尼尼特（）{
常量标志=[]；
this.service.get（this.entityUrl）.subscribe（x=>{
如果（x&&x.length>0）{
this.ShipmentList=x；
for（设i=0；i
您可能希望在从服务/api返回数据时显示ShipmentList的数据

此外，您还需要输出实例变量。像下面这样。试着调试你的代码

export class ReportingFilterComponent implements OnInit {
  ShipmentList: ShipmentByProject[];
  entityUrl = 'ShipmentDetail/GetByReportingProject?repPrj=000634';
  output = [];

  constructor(private service: DataService) {
  }

  ngOnInit() {
    const flags = [];
    this.service.get<ShipmentByProject[]>(this.entityUrl).subscribe(x => {
      if (x && x.length > 0) {

        this.ShipmentList = x;
        for (let i = 0; i < this.ShipmentList.length; i++) {
          if (flags[this.ShipmentList[i].customer_shipto_name]) continue;
          flags[this.ShipmentList[i].customer_shipto_name] = true;
          this.output.push(this.ShipmentList[i].customer_shipto_name);
        }
      }

    });
  }
}

导出类ReportingFilterComponent在NIT上实现{
ShipmentList:ShipmentByProject[]；
entityUrl='ShipmentDetail/GetByReportingProject？repPrj=000634'；
输出=[]；
构造函数（专用服务：数据服务）{
}
恩戈尼尼特（）{
常量标志=[]；
this.service.get（this.entityUrl）.subscribe（x=>{
如果（x&&x.length>0）{
this.ShipmentList=x；
for（设i=0；i
假设您的
service.get[]>
调用返回一个承诺，则在承诺得到解决之前，
this.ShipmentList
似乎是未定义的。您可以将该值初始化为空数组以消除错误，或者在尝试读取长度之前检查是否存在错误。@Josh Rutherford我该怎么做，很抱歉第一次在Angular中编程时太迟钝了没有问题，请参阅answer@JoshRutherford我已将发货单从