Question

当我点击api从构造函数中的服务器获取数据并将其存储在局部变量中时。我在html中循环这个变量来构建表并在表中显示数据。但是当我在api上成功调用一个函数并在其中循环使用HTML中使用的相同变量时，函数中的循环将首先运行并在该循环之后运行。我的要求是首先运行HTML循环，然后在函数完成循环之后运行。

HTML CODE

jobHistory : any;    
constructor()
{
  this.service.getCustomerJobHistory().subscribe(   res => { this.jobHistory = res},
                                                    err => console.log(err),
                                                    () => this.setRating()
                                              );


}

setRating()
{
   //I want to run this loop after HTML loop completion.
   for(let booking of this.jobHistory)
   {
     console.log(booking);
   }
}

TYPESCRIPT代码

sqlx.Select

Answer 1

基本上，您可以使用＆＃39; last＆＃39; * ngFor

的运算符

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var tableView: TableView!

    override func viewDidLoad() {
        super.viewDidLoad()
        tableView.delegate = self
        tableView.dataSource = self
    }
}

extension ViewController: UITableViewDelegate {

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        tableView.scrollViewDidScroll(scrollView)
    }

    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        tableView.scrollViewWillBeginDragging(scrollView)
    }
}

extension ViewController: UITableViewDataSource {
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 30
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        return UITableViewCell()
    }
}

Answer 2

<table>
    <tr *ngFor="let booking of jobHistory; let last = last">
        <td>{{booking}}</td>
        <ng-container *ngIf="last">{{setRating()}}</ng-container>
    </tr>
</table>

setRating() {
   //I want to run this loop after HTML loop completion.
   for(let booking of this.jobHistory) {
       console.log(booking);
   }
}

上述解决方案将检测ngFor循环的最后一次迭代。如果上一个setRating不是index，则会调用null。

如果您需要任何帮助，请尝试使用此解决方案并告知我们。

编辑：为避免多个执行问题，

lastValue:any;
setRating(last:any) {
   if (this.lastValue==last)
return;

   //I want to run this loop after HTML loop completion.
   for(let booking of this.jobHistory) {
       console.log(booking);
   }
   this.lastValue=last
}

Answer 3

所以我看到了答案（包括被接受的答案），虽然他们绝对值得了解，但我认为这不是处理你情况的最好方法。原因已经在接受答复的评论中提出：

当prodMode中未运行角度时，如果未在prodMode中运行，则由于角度为双倍动力变化检测，您将会出现奇怪的行为。（由于更改检测，初始化和每次更改（甚至单击一个元素）都会使您的功能两次。
即使在prodMode中，取决于array初始化的位置，也可以多次调用该函数。例如，像这样初始化数组：

export class YourComp { jobHistory: any[] = ['one', 'two', 'three' ]; setRating() { ... } }

在初始化后会调用该函数三次，即使在prodMode（这很奇怪......）。
每个触发事件都会触发change detection，last将重新评估setRating属性，从而再次调用您的函数。因此，点击您的某个元素（即使您甚至没有设置点击监听器）也会再次呼叫component。

因此，我建议尝试另一种方法。我想出的最简单的方法是使用另一个export class MyTableComponent { @Input() data: any[]; ngAfterViewInit() { this._setRating(); } private _setRating() { console.log('set rating...'); } }。

这样的事情：

<my-table [data]="jobHistory" *ngIf="jobHistory"></my-table>

作为模板，它应该与您在问题中发布的表格相同。在您的父组件中，您可以使用jobHistory

之类的内容对其进行初始化

如果您的MyTableComponent数据将在您的主要组件中更新，您只需清除它（这将破坏setRating），再次将新的/更新的元素推入阵列，这将重新初始化组件，最后调用setRating。

如果过早地调用setTimeout(() => { this._setRating(); });，可能会有一点dbGrid.Items.Refresh();。

希望我能提供帮助。

如何在angular2中刷新HTML内容后调用函数？

3 个答案: