只更新表4中的特定行？

Question

我有如下表：

<table class="table table-striped table-bordered table-condensed"> 
    <thead> 
    <tr> 
     <th>Url</th> 
     <th>Registration Status</th> 
     <th>&nbsp;</th> 
     <th>&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let url of urls"> 
     <td><a href="http://www.{{url.Url}}" target="_blank">{{url.Url}}</a></td> 
     <td>{{url.StatusText}}</td> 
     <td><input type="button" *ngIf="url.Status < 3" class="btn btn-primary" [value]="url.Step" (click)="Register(url.Id,url.Url,url.Status)"/><span *ngIf="updateInProgress">Running...</span></td> 
     <td><button class="btn btn-danger" (click)="removeUrl(url)">Remove</button></td> 
    </tr> 
    </tbody> 
</table> 

当对特定行一个用户点击按钮，我去展示它旁边的一个进步微调。我遇到的问题是如果我添加进度微调器占位符并将其设置为某项，它将显示每行。
另外，是否有可能在一个操作完成后，我可以只更新表的一部分。目前我正在从服务器上重新检索数据，但我觉得这是过分的。例如，如果我更新第3行，并且现在想要在第3行上设置完成状态，我可以访问第3行状态的当前值，只是更新它而不是去服务器并获取更新的数据？

Answer 1

你必须做一些这样的：

<tr *ngFor="let url of urls"> 
    <td><a href="http://www.{{url.Url}}" target="_blank">{{url.Url}}</a></td> 
    <td>{{url.StatusText}}</td> 
    <td><input type="button" *ngIf="url.Status < 3" class="btn btn-primary" [value]="url.Step" (click)="Register(url.Id,url.Url,url.Status)"/><span *ngIf="url.updateInProgress">Running...</span></td> 
    <td><button class="btn btn-danger" (click)="removeUrl(url)">Remove</button></td> 
</tr> 

通知书*ngIf="url.updateInProgress"

Also, is it possible after an operation is complete, I can just update part of the table. 当然，是的。

P.S：
你不需要与指数的工作，只是在url您removeUrl或Register工作。
e.g：

private removeUrl(url) { 
    url.updateInProgress = true; 
    ... 

} 

Answer 2

我以为你有类似的东西，并显示旋转类，这表明你的微调跨越。当用户点击按钮时，使用ID选择器找到确切的范围并向其添加spinner类。

<table class="table table-striped table-bordered table-condensed"> 
    <thead> 
    <tr> 
     <th>Url</th> 
     <th>Registration Status</th> 
     <th>&nbsp;</th> 
     <th>&nbsp;</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr *ngFor="let url of urls"> 
     <td><a href="http://www.{{url.Url}}" target="_blank">{{url.Url}}</a></td> 
     <td>{{url.StatusText}}</td> 
     <td><span id="url_{{url.Id}}"> </span></td> 
     <td><input type="button" *ngIf="url.Status < 3" class="btn btn-primary" [value]="url.Step" (click)="Register(url.Id,url.Url,url.Status)"/></td> 
     <td><button class="btn btn-danger" (click)="removeUrl(url)">Remove</button></td> 
    </tr> 
    </tbody> 
</table> 

和打字稿代码将是这样的：

Register(id,url,status){ 
     $('#'+id).addClass('spinner'); //the spinner will spin while the 
     this.someAPI.someOperation().subscribe(() => { 
      //success 
     }, 
    ()=> { 
     //error 
     }, 
    () => { 
     //complete 
     $('#'+id).removeClass('spinner'); 
     }); 
} 

需要注意的是：它不劝直接DOM操作就像我现在这样。您可能想要使用ElementRef。