Ответ сервера Angular 7 не отображается в списке - PullRequest
Новая
       12

Ответ сервера Angular 7 не отображается в списке

0 голосов
/ 23 апреля 2019

Я очень новичок в Angular.В настоящее время я начал работать с одним образцом.Я пытаюсь получить данные с сервера и хотел бы показать то же самое в списке.Ответ API поступает в виде почтальона, но не происходит в коде.

Я пытаюсь с 2 дней, но не повезло.Пожалуйста, предоставьте мне любую ссылку или подсказку.Вот мой код:
home.component.ts: 

export class HomeComponent {
    currentUser: User;
    companiesFromAPI: Companies;

    constructor(
        private userService: UserService,
        private authenticationService: AuthenticationService
    ) {
        this.currentUser = this.authenticationService.currentUserValue;
        console.log(this.currentUser.token)
        if(this.currentUser.role === "Admin"){

        } else if(this.currentUser.role === "User"){
          console.log("In user");

          this.userService.getCompaniesById(this.currentUser.id).subscribe(
            data => this.companiesFromAPI = data as Companies
          );
        }
    }

userService.ts: 

getCompaniesById(id) {
    return this.http.get('http://www.localhost:8080/omshreess_webservices/get_companies_by_user.php?id='+id);
  }

companies.ts.

export class Companies {
status: number;
companies: Company[];
}

interface Company {
tbl_company_master_id: string;
file_number: string;
company_name: string;
added_at: string;
updated_at: string;
address_first_line: string;
address_second_line: string;
pf_code: string;
cmp_pf_rate_contri: string;
cmp_pension_rate_contri: string;
ac2: string;
ac21: string;
ac22: string;
retirment_age: string;
cmp_pension_salary_limit: string;
cmp_pf_salary_limit: string;
esic_code: string;
esi_sal_limit: string;
esic_employee_rate: string;
local_office: string;
bank_name: string;
bank_address: string;
ot_rate: string;
pt_registration_number: string;
year: string;
user_id: string;
Pf_company_user_id: string;
Pf_company_password: string;
esic_user_id: string;
esic_password: string;
pt_user_id: string;
pt_password: string;
contact_person_name: string;
contact_person_number: string;
contact_person_email: string;
field_1: string;
field_2: string;
field_3: string;
}

home.component.html.

<ul>
    <li *ngIf="companiesFromAPI">{{companiesFromAPI.company_name}} {{companiesFromAPI.file_number}}</li>
</ul> .

Вот ответ json, который я получаю сейчас.: 

{
"status": 0,
"companies": [
    {
        "tbl_company_master_id": "3",
        "file_number": "1",
        "company_name": "Armal Apps",
        "added_at": "2019-04-14 17:37:10",
        "updated_at": "2019-04-14 17:37:10",
        "address_first_line": "Chinchwad",
        "address_second_line": "Pune",
        "pf_code": "123456Adg",
        "cmp_pf_rate_contri": "12",
        "cmp_pension_rate_contri": "4",
        "ac2": "123",
        "ac21": "123",
        "ac22": "123",
        "retirment_age": "50",
        "cmp_pension_salary_limit": "4000",
        "cmp_pf_salary_limit": "5000",
        "esic_code": "12345",
        "esi_sal_limit": "3000",
        "esic_employee_rate": "12",
        "local_office": "pune",
        "bank_name": "HDFC",
        "bank_address": "Pune",
        "ot_rate": "2",
        "pt_registration_number": "bd6282bk",
        "year": "2019",
        "user_id": "2",
        "Pf_company_user_id": "san",
        "Pf_company_password": "san",
        "esic_user_id": "san",
        "esic_password": "san",
        "pt_user_id": "san",
        "pt_password": "san",
        "contact_person_name": "san",
        "contact_person_number": "8698579562",
        "contact_person_email": "armalsandip@gmail.com",
        "field_1": "1",
        "field_2": "1",
        "field_3": "1"
    },
    {
        "tbl_company_master_id": "4",
        "file_number": "2",
        "company_name": "Infosys",
        "added_at": "2019-04-14 17:38:10",
        "updated_at": "2019-04-14 17:38:10",
        "address_first_line": "Chinchwad",
        "address_second_line": "Pune",
        "pf_code": "bfsanb2b4",
        "cmp_pf_rate_contri": "12",
        "cmp_pension_rate_contri": "4",
        "ac2": "123",
        "ac21": "123",
        "ac22": "123",
        "retirment_age": "50",
        "cmp_pension_salary_limit": "4000",
        "cmp_pf_salary_limit": "5000",
        "esic_code": "12345",
        "esi_sal_limit": "3000",
        "esic_employee_rate": "12",
        "local_office": "pune",
        "bank_name": "HDFC",
        "bank_address": "Pune",
        "ot_rate": "2",
        "pt_registration_number": "bd6282bk",
        "year": "2019",
        "user_id": "2",
        "Pf_company_user_id": "san",
        "Pf_company_password": "san",
        "esic_user_id": "san",
        "esic_password": "san",
        "pt_user_id": "san",
        "pt_password": "san",
        "contact_person_name": "san",
        "contact_person_number": "8698579562",
        "contact_person_email": "armalsandip@gmail.com",
        "field_1": "1",
        "field_2": "1",
        "field_3": "1"
    }
]

}

1 Ответ

0 голосов
/ 23 апреля 2019

Вы пытаетесь отобразить список. Итак, вы должны использовать * ngFor для перебора массива. Вот что вы можете сделать, чтобы это заработало: 

<ul *ngIf='companiesFromAPI'>
  <li *ngFor='let cmpy of companiesFromAPI.companies'>{{cmpy.company_name}}</li>
</ul>
...