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

【问题标题】：Showing only unique Values in the Selectbox/dropdown在选择框/下拉列表中仅显示唯一值
【发布时间】：2019-08-16 15:28:13
【问题描述】：

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

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);
  }}

为了测试我在 html 中使用了 output 数组

 Output data!
<li *ngFor="let out of output">
     {{ out.customer_shipto_name }}
</li>

<div class="dx-fieldset">
<div class="dx-field">
    <div class="dx-field-label">ShipTo Account</div>
    <div class="dx-field-value">
        <dx-select-box [dataSource]="ShipmentList" displayExpr="customer_shipto_name"></dx-select-box>
    </div>
 </div>

即使ShipmentList 有数据，我也没有在output 中得到任何信息。

【问题讨论】：

假设您的 service.get<ShipmentByProject>[]> 调用返回了一个承诺，那么在承诺解决之前，this.ShipmentList 似乎是未定义的。您可以将值初始化为空数组以消除错误，或者在尝试读取长度之前检查它是否存在。
@JoshRutherford 我该怎么做，抱歉第一次在 Angular 编程时生硬
没问题，看贴出来的答案
@JoshRutherford 我已经从模型类 ShipmentByProject 初始化了 ShipmentList
你在这里所做的是指定ShipmentList的类型（使用冒号语法），但你没有给它一个值。那看起来像ShipmentList: ShipmentByProject[] = []

标签： javascript angular typescript angular7

【解决方案1】：

当您的服务/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);
        }
      }

    });
  }
}

【讨论】：

【解决方案2】：

假设您的 service.get<ShipmentByProject>[]> 调用返回一个承诺，那么在承诺解决之前，this.ShipmentList 似乎是未定义的。您可以将值初始化为空数组以消除错误，或者在尝试读取长度之前检查它是否存在。

可以提前初始化ShipmentList：

class YourClass {
    ShipmentList = [];

    constructor() {
        // ...
    }
}

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

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

或者在阅读长度之前检查它：

var l = Array.isArray(this.ShipmentList) ? this.ShipmentList.length : 0;

【讨论】：

我尝试了您的建议并通过代码更改更新了问题。以及我在屏幕上看到的截图
ngOnInit 将在您的订阅解决之前被调用。您应该将您的代码从ngOnInit 移动到您的ShipmentList 订阅。或者最好使用异步管道。

【解决方案3】：

您正在使用尚未加载的数据。 ngOnInit 方法中的内容应该在上面的订阅中。

正如@Ash 提到的，output 属性应该是一个类属性，而不是在ngOnInit 中定义。

注意 1：不要使用 var，而是使用 const 或 let。因为这两个存在于它们所在的块中。

注意2：在Typescript中使用camelCase，例如ShipmentList应该是shipmentList

【讨论】：

【解决方案4】：

因此，抛出的错误位于您的 ngOnInit 块中。 this.ShipmentList 未定义吗？

另外，要在您的角度模板中访问output，它需要是组件类的一个属性。您应该将public output = [] 放在您班级的顶部，并将其作为目标。

【讨论】：

如果您希望它在模板中可用，则该输出应该是 public，而不是 private。
@JonKoops 哎呀，是的，非常正确。它会起作用，但不会通过 AoT。谢谢。