首页 文章

angular：update指定dom的一部分为两个ngFors

提问于
浏览 次
0

我有一个问题，不知道有可能在角度做这个 .

我有一个简单的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>

"magic"来自点击事件 (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，但它不起作用 . 所以，请有任何人的想法来解决问题？

angular ngfor

1 回答

  • 0

    这是你可以做的：

    更改您的apiNames数据结构 . 例如：

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

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

    现在在模板中使用apisData并将数据attribut绑定到下一个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;
  });
}
    回复于

相关问题