只更新表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。