Как заполнить раскрывающийся список материалов в угловых 7 из моего веб-API c #?

Question

Я новичок в angular и пытаюсь выяснить, как связать выпадающий список в angular из C # .NET Web API. Вот что я делаю в своем приложении:

Модель веб-API MVC

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

Метод контроллера для Angular для потребления

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

component.html

<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>

Помимо этого, я отразил свою модель в ее собственном model.ts. Вот где я застрял. Все учебники, которые я прочитал, идут отсюда на юг. Я попробовал следующее в моем component.ts

import { Component, OnInit } from '@angular/core';
import { ReprintService } from 'src/app/shared/reprint.service';
import { FormBuilder, Validators } from '@angular/forms';
import { Observable } from 'rxjs';
import { Reprint } from 'src/app/shared/reprint.model';
import { NotificationService } from 'src/app/shared/notification.service';
import { MatDialog } from '@angular/material';

public GetShirtCodes = (): Observable<any> =>  
{  
    return this._http.get(this.actionUrl)  
        pipe.(map((response: Response) => <any>response.json())); //shows error on response
}

Но я считаю, что это устаревшее решение.

Answer 1

Ваш 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>

Для результата обслуживания должен быть установлен в вашей модели:

general get:

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

Answer 2

Будучи новичком, пока не используйте 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 );
}