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

我假设你有类似于spinner类的span，它显示了你的微调器。当用户单击该按钮时，找到具有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。

只更新表格中的特定行4？

2 个答案: