Я новичок в Angular, у меня есть эта проблема. Я пытаюсь вернуть данные из API. Данные возвращаются успешно и они записываются как массив на консоль, но они не отображаются в представлении, когда я использую директиву ngFor для итерации по ней.
Это служба
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AccountDetails } from 'src/app/models/account-details.model';
@Injectable({
providedIn: 'root'
})
export class LoginService {
formData: AccountDetails;
private readonly url: string = "http://localhost:60223/api/Account";
constructor(private http: HttpClient) {
}
getLogin()
{
return this.http.get(this.url);
}
}
И мой компонент ts
import { Component, OnInit } from '@angular/core';
import { LoginService } from 'src/services/login.service';
import { AccountDetails } from '../models/account-details.model';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
formData: AccountDetails;
list: AccountDetails[];
constructor(private loginClient: LoginService) {
}
ngOnInit() {
this.loginClient.getLogin()
.subscribe(resp => {this.list = resp[enter image description here][1] as AccountDetails[]
console.log(this.list)
});
}
Вид компонента
<div class="container">
<ul *ngFor="let ls of list">
<li>{{ls.Username}}</li>
</ul>
</div>
Изображение - это то, что я получаю в консоли. https://i.stack.imgur.com/RFA0T.png
Пожалуйста, помогите.