angular: обновить указанную часть dom на два ngFors - PullRequest
Новая
       7

angular: обновить указанную часть dom на два ngFors

0 голосов
/ 24 сентября 2018

У меня есть проблема, и я не знаю, как это можно сделать в угловом формате.

У меня есть простой код в HTML: 

<div >
    <div *ngFor="let item of apiNames, let i = index" class="rescontainer">
        <div class="resbox headline">
            <strong>Name:</strong> {{item}}
            <span class="extra" (click)="getApiInfo($event, i)">mehr Info</span>
        </div>

        <div id="resMoreBox{{i}}">
            <div *ngFor="let item of apiRes, trackBy: trackByFn" >
                <div class="resbox" *ngIf="item['ADS Container']">
                    <strong>ADS Container:</strong> {{item['ADS Container']}}
                </div>
                ...
            </div>
        </div>
    </div>
</div>

"Волшебство" происходит от щелчкасобытие (click)="getApiInfo($event, i).Это запустить http.get.Это прекрасно работает, и результат: 

[{…}]
0: {PK: 81, IconIndex: "6_1", Name: "VKNE2004", Current Scan: null, PWD Last Set: 4, …}

Результат всегда является частью одного из элементов первого ngFor: 

ngFor1 = Itemname1
------ngFor2 Apires
ngFor1 = Itemname2
------ngFor2 Apires
ngFor1 = Itemname3
------ngFor2 Apires
....

Теперь я хотел бы обновить купол тамгде он соответствует элементу из первого ngFor. 

!API RES get Itemname2!
ngFor1 = Itemname1
------ngFor2 Apires
ngFor1 = Itemname2
------ngFor2 Apires --> UPDATE DOM
ngFor1 = Itemname3
------ngFor2 Apires
....

Проблема в том, что угловое обновление второго содержимого ngFor в каждом элементе первого ngFor.

И да ... это нормально ^^

Итак, вопрос в том, возможно ли обновить только часть спецификации первого ngFor?Может по имени?

Я пробовал с trackBy, но он не работает.Поэтому, пожалуйста, у кого-нибудь есть идея для решения проблемы?

1 Ответ

0 голосов
/ 25 сентября 2018

Вот что вы можете сделать:

Изменить структуру данных apiNames.Пример: 

apiNames = ['/api1', '/api2', '/api3'];

const apisData = this.apiNames.map((apiName) => {
  return {
    apiName: apiName,
    data : []
  };
});

теперь используйте apisData в своем шаблоне и привязывайте атрибут данных к следующему ngFor 

<div *ngFor="let item of apisData , let i = index" class="rescontainer">
    <div class="resbox headline">
        <strong>Name:</strong> {{item.apiName}}
        <span class="extra" (click)="getApiInfo($event, item)">mehr Info</span>
    </div>

    <div id="resMoreBox{{i}}">
        <div *ngFor="let apiData of item.data, trackBy: trackByFn" >
            <div class="resbox" *ngIf="apiData['ADS Container']">
                <strong>ADS Container:</strong> {{apiData['ADS Container']}}
            </div>
            ...
        </div>
    </div>
</div>

Затем измените реализацию getApiInfo для управления item.data :) 

getApiInfo($event, item) {
  this.httpClient.get(item.apiName + '/blablabla').subcribe( (result) => {
    item.data = result;
  });
}
...