Блог

Я хочу заранее поблагодарить вас за вашу помощь. Смысл проекта состоит в том, чтобы иметь api rest .net core и пользовательский интерфейс в angular, которые взаимодействуют.

В настоящее время api работает: отправляет массив из двух объектов типа Member ([Member_0, Member_1]) и вызывается запросом get от Angular. http://localhost:61236/api/Members

 [{"id":0,"lastname":"V","firstname":"D","dateOfBirth":"00/01/1789"},{"id":1,"lastname":"C","firstname":"M","dateOfBirth":"01/02/1789"}]
 

Но это то, что показано в проводнике (с угловым): два неопределенных объекта… и я не знаю, что не так. Я видел много вопросов по этому поводу, но ни один ответ не подходит мне.

Код Api Rest:

  [ApiController]
[Route("api/[controller]")]
public class MembersController : ControllerBase
{
    // GET : Members
    [HttpGet]
    public async Task<ActionResult<IEnumerable<Member>>> Get()
    {
        var task = Task.Factory.StartNew(() =>
            {
                return MembersJsonProcessor.Deserialize(nameof(Members).ToString());
            });
        await task;
        if (task.Result == null) { return NotFound(); }
        return Ok(task.Result.MembersList.ToArray());
    }
}
 

Обслуживание участников:

 export class MembersComponentService {

readonly baseURL = "http://localhost:61236/api/Members"

constructor(
private http: HttpClient,
private  messageService: MessageComponentService) {}

httpOptions = {
  headers: new HttpHeaders({ 
    'Content-Type': 'application/json'
    })
};

getMembers() : Observable<Member[]> {
    return this.http.get<Member[]>(this.baseURL, this.httpOptions)
      .pipe(              
        map((response : Member[]) => {
          // var result : Member[] = [];           
          // response.forEach(member => {
          //   result.push(member);
          //   this.log(member.Firstname);
          // });
          this.log("Firstname: "   response[0].Firstname); // return 
          Undefined
          return response;
        }),
          tap((response) => {
            this.log('fetched members');
            this.log(response.length.toString());
          }),
          catchError(this.handleError<Member[]>('getMembers Error!', []))
      );
   }
 }
 

Компонент-член:

 export class MembersComponent implements OnInit {
members: Member[];

constructor(private service: MembersComponentService,
private  messageService: MessageComponentService) {
  this.members = [];
 }

ngOnInit() {
this.getMembers();
}

getMembers() {
this.service.getMembers().subscribe((response: Member[]) => {
  // this.members = [
  //   {Id:0, Firstname:"D", Lastname:"V", DateOfBirth:"00/01/1789"},
  //   {Id:1, Firstname:"M", Lastname:"C", DateOfBirth:"01/02/1789"}
  // ];
  this.members = response;

});
}
/** Log a HeroService message with the MessageService */
private log(message: string) {
  this.messageService.add(`MemberComponent: ${message}`);
}
 

}

Html компонента-члена:

 <h2>Members</h2>
<button (click)="getMembers()">Refresh</button>
<hr/>
<ul class="members-list">
<li *ngFor="let member of members" class="app-members">
    <span>Id: {{member.Id}}</span>
    <span>Firstname: {{member.Firstname}}</span>
    <span>Lastname: {{member.Lastname}}</span>
    <span>DateOfBirth: {{member.DateOfBirth}}</span>
</li>  
</ul>
 

Ваши данные :

 {"id":0,"lastname":"V","firstname":"D","dateOfBirth":"00/01/1789"}
 

К чему вы пытаетесь получить доступ :

 {{member.Id}}
{{member.Firstname}}
{{member.Lastname}}
{{member.DateOfBirth}}
 

Ни одна из переменных в вашем шаблоне не соответствует вашей структуре данных. Это должно быть :

 {{member.id}}
{{member.firstname}}
{{member.lastname}}
{{member.dateOfBirth}}
 

Просто проверьте свой элемент интерфейса[]. Это то же самое, что и ответ?

Проблема в this.log("Firstname: " response[0].Firstname); коде. Ответ-это объект ниже, который не может быть повторен. Вам лучше войти response.user[0].firstname в систему (также проверьте строчные/прописные буквы).

 {
    "success": true,
    "user": [{
        "id": 0,
        "lastname": "V",
        "firstname": "D",
        "dateOfBirth": "00/01/1789"
      },
      {
        "id": 1,
        "lastname": "C",
        "firstname": "M",
        "dateOfBirth": "01/02/1789"
    }
   ]
 }
 

Зарегистрируйте весь объект ответа, чтобы увидеть его свойства, следовательно, определите, какие из них вы хотели бы отобразить