Question

我有一个问题，不知道有可能这样做。

我有一个简单的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的每个Item中的第二个ngFor内容进行角度更新。

是的...这很正常^^

问题是，是否可以仅更新第一个ngFor的特定部分？也许是名字？

我尝试使用trackBy，但是它不起作用。所以，请任何人有一个解决问题的想法？

Answer 1

这是您可以做的：

更改您的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;
  });
}

angular：更新指定两个ngFors的dom部分

1 个答案: