Question

我在模型类中使用了C＃字典

 public class CommonInfo
{
    public Dictionary<string, string> JobTypes { get { return _dic; } set { _dic = value; } }

    Dictionary<string, string> _dic = new Dictionary<string, string>
    {
        {"PO","Production" },
        {"SO", "Sales" },
        {"PS", "Production and Sales" }
    };
}

然后我需要将此字典值绑定到Angular 6材质的下拉列表中

this.jobTypeList = currentDefaults.JobTypes;

和ui

<mat-form-field>
  <mat-label>Job type</mat-label>
    <mat-select>
      <mat-option *ngFor="let jobtype of jobTypeList" [value]="jobtype.value"> {{jobtype.id}}
      </mat-option>
   </mat-select>
</mat-form-field>

Answer 1

字典仅是键值对，因此您可以将服务器端响应映射到如下所示的打字稿模型

export interface KeyValue {
  key?: string;
  value?: string;
}

对服务器端方法的调用是

  geJobTypes(): Observable<KeyValue[]> {
    const url = `service/jobtypes`;
    //httpclient to make call to server method 
    return this.apiHandler.get<KeyValue[]>(url);
  }

html是

<mat-option *ngFor="let jobtype of jobTypeList" [value]="jobtype.value"> {{jobtype.key}}
      </mat-option>

在C＃中做到这一点

public  IEnumerable<KeyValuePair<string, string>>  GetJobTypes(){
_dic.ToList<KeyValuePair<double, double>>();
}

Answer 2

我找到了解决此问题的合适答案。我们可以将对象转换为数组，如下所示：

Object.keys(jobTypeObj).map(key => ({ type: key, value: jobTypeObj[key] }));

然后可以轻松绑定下拉列表。我认为这对其他人会有帮助。

如何将C＃词典绑定到angular 6材料中的下拉列表

2 个答案: