Javascript-форум (https://javascript.ru/forum/)
-   Angular.js (https://javascript.ru/forum/angular/)
-   -   Отображение связанных элементов (https://javascript.ru/forum/angular/74743-otobrazhenie-svyazannykh-ehlementov.html)

JustMe 05.08.2018 15:45

Отображение связанных элементов
 
Добрый день.
Есть следующая задача:
Надо отобразить элемент, в полях у него есть как просто строчки так и указатели на другой элемент. Например поле со значением 0, а в другом элементе 0 указывает на расшифровку : "значение". Как это можно реализовать?

export class Employee {
constructor(public id: number,
public firstName: Alex,
public lastName: Ivanov,
public index: 170000)}

export class index {
constructor(public id: number,
public index: string,
public adress: string)}


@Component({
selector: 'app-employee',
templateUrl: './employee.component.html',
styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {

employee: Employee;
index: Index[ ] = [ ];


Например индекс 170000 - Тверь
Надо чтобы Employee отображался как:

имя: Alex,
фамилия: Ivanov,
город: Тверь

Подскажите, как это можно реализовать?

destus 05.08.2018 16:39

JustMe,
Что именно не получается? Создайте метод в классе компонента loadData(), в котором и приведите элементы в "чистые" объекты. Вы же знаете какие значения указывают на другой элемент?

JustMe 05.08.2018 22:13

Не получается обновить поля объекта, отображаются поля старого объекта.
Что я делаю не так?

export class EmployeeComponent implements OnInit {

@Input() employee: Employee;

indexess: index[] = [];

constructor(private service: EmployeeService) {
}

ngOnInit() {
this.loadData();
}

loadData() {

this.service.getIndex().subscribe(
data => this.indexes = data,
error => console.log(error)
);

for (let ind of this.indexes) {
if (ind.index === this.employee.index)
{
this.employee.index = index.address;
}
}

destus 06.08.2018 07:03

JustMe,
Ну потому что this.service.getIndex() - штука асинхронная. А код ниже выполняется синхронно.
loadData() {

this.service.getIndex().subscribe(
data => {
    this.indexes = data;
    for (let ind of this.indexes) {
        if (ind.index === this.employee.index)
           {
               this.employee.index = index.address;
           }
},
error => console.log(error)
);
}

JustMe 06.08.2018 17:34

Понятно. То есть надо сначала получить все данные через метод getIndex() и только потом "сделать" чистые объекты? Я пока плохо ориентируюсь, как по хорошему это обычно делают? Может пример есть?

destus 07.08.2018 06:49

Цитата:

То есть надо сначала получить все данные через метод getIndex() и только потом "сделать" чистые объекты?
Ну по хорошему да, иначе что вы в шаблоне будете выводить, если у вас в качестве значения не данные, а ссылка на другой элемент.


Часовой пояс GMT +3, время: 02:00.