显示在angular2的桌行的装载消息

Question

  <tbody>
    <tr *ngFor="let item of  _studentList let i=index">
    <td  align='center'>{{ i }}--{{item.rollno}}</td>
    <td  align='center'>{{item.sname}}</td>
    <td  align='center'>{{item.status!='NOT'?item.status:''}}</td>
    <td  align='center'>
        <input type='checkbox'   style='height:15px; width:15px;' [checked]="item.status=='P'"  (change)="onChangePA(item)"  ></td>
  <td  align='center'>
   <a><img src='../images/d.jpg' height='30' width='30' /> </a>
 </td>
 </tr>
 </tbody>

当我更改复选框时，我会执行API请求，直到我得到我想要的回复disable that row或showing loading on row

怎么做？

我只想要一次加载。怎么做？

Answer 1

您可以将表格行作为组件并禁用输入，如下所示 从'@ angular / core'导入{Component，Input}

@Component({
  selector: 'table-body',
  template: `

    <td  align='center'>{{ i }}--{{item.rollno}}</td>
    <td  align='center'>{{item.sname}}</td>
    <td  align='center'>{{item.status!='NOT'?item.status:''}}</td>
    <td  align='center'>
        <input type='checkbox' style='height:15px; width:15px;' [checked]="item.status=='P'"  (change)="onChangePA(item)" [disabled]="disableinput"></td>
  <td  align='center'>
   <a><img src='../images/d.jpg' height='30' width='30' /> </a>
 </td>
  `,
})
export class tBody {
  @Input() item:any;
   @Input() i:any;
  disableinput: false;
  onChangePA(val) {
    this.disablebody = true;
//do your stuff 
  }
}

您的主要模板如下

  <table>
  <thead>
  <tr>
  <th>Roll</th>
  <th></th>
  <th>Status</th>
  <th>Action</th>
    <th></th>
  </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of  _studentList let i=index">
      <table-body [item]="item" [i]="i"></table-body>
 </tr>
 </tbody>
 </table>

Plunk Link

Answer 2

Demo

基本上，你需要在组件中有一个变量，告知模板api调用是启动还是完成。

最初＆＃34; showLoading＆＃34;将是假的。将其设置为＆＃34; true＆＃34;在进行api通话时。收到回复后，将其设置为＆＃34; false＆＃34;。

在您的模板中，您将拥有＆＃34;类绑定＆＃34; ，就像这样 -

<div>
      <div [class.loading]=showLoading>
        I'm a div that wants to be styled
      </div>
      <button (click)="toggle()">Toggle</button>
</div>

class App {
  public showLoading = false;

  toggle() {
    this.showLoading = !this.showLoading;
  } 
}

Answer 3

也许试试这个

在Html中：

<input type="checkbox" (change)="onClick()" [disabled]="isDisable" />

在.ts文件中：

export class YourComponent {

  isDisable = false;

  onClick() {
    this.isDisable = true;
    //Your code here
    this.isDisable = false;
  }