Question

我是angular的新手，并试图找出如何从C＃.NET Web API绑定angular中的dropdownlist。这是我在应用程序中正在做的事情：

MVC Web API模型

from  pyspark.sql.functions import input_file_name

df.withColumn("filename", input_file_name())

Angular使用的控制器方法

[Table("tblShirt")]
public class Shirt
{
    [Key]
    public int ShirtID { get; set; }
    public string ShirtName { get; set; }
    public string ShirtCode { get; set; }
    public bool IsActive { get; set; }
}

component.html

[HttpGet]
[AllowAnonymous]
public IEnumerable<Shirt> GetShirtCodes()
{
    var result = (from r in db.Shirts where r.IsActive == true orderby r.ShirtCode select r).ToList();
    return (result);
}

除此之外，我还在自己的model.ts中镜像了我的模型。这就是我卡住的地方。我读过的所有教程都从这里开始。我已经在我的component.ts

中尝试了以下内容

<mat-form-field style="width:inherit;">
  <mat-label>Shirt Code</mat-label>
    <mat-select>
      <mat-option *ngFor="let shirt of shirts" [value]="shirts.value">
        {{shirts.viewValue}}
      </mat-option>
     </mat-select>
 </mat-form-field>

但是我相信这是一个过时的解决方案。

Answer 1

作为初学者，请不要使用Observables，请尝试一下

this._someService.SearchSomeData(this._someId).
subscribe(x =>
{
    this.someInfo =x;
});

您的someService方法可能如下所示：

@Injectable()
export class CoursesService {

constructor(private _http: HttpClient) { }

SearchSomeData(id, ){
    return this._http.get("/api/Search/GetSomeData/"+id );
}

Answer 2

您的Component.html必须通过以下方式修复：

<mat-form-field style="width:inherit;">
  <mat-label>Shirt Code</mat-label>
    <mat-select>
      <mat-option *ngFor="let shirt of shirts" [value]="shirt.ShirtID">
        {{shirt.ShirtName}}
      </mat-option>
     </mat-select>
 </mat-form-field>

必须在您的模型中设置服务结果：

通用获取：

  public Get<T>(endPoint: string, options?: IRequestOptions): Observable<T> {
    return this.http.get<T>(this.api + endPoint, options);
  }

一般情况下，可以在服务上方拨打电话：

  getAll(endPoint: string): Observable<any> {
    return this.httpClient
      .Get(endPoint)
      .pipe(map(response => response));
  }

最后在您的组件中：

ngOnInit() {
this.service.getAll(endPoint).subscribe(res => {this.shirts = res});
}

如何从C＃Web API的angular 7中填充材料下拉列表？

2 个答案: