Angulars - 模版写法--列表篇

直接上代码不多说

list.component.html

<ol class="breadcrumb text-primary rounded-0" style="border:1px solid #e6e6e6;">
  <li> <a routerLink=""><i class="fa fa-home"></i> 首页 </a></li>
  <li> <a><i class="fa fa fa-file-text-o"></i> XXX列表 </a></li>
</ol>
<br>
<form class="card rounded-0" #searchForm="ngForm" (ngSubmit)="doSearch()">
  <div class="card-header"><i class="fa fa-search"></i> 筛选</div>
  <div class="card-block">
    <!-- 一个筛选条件一个<div class="input-group" ></div> <br>-->
    <div class="input-group">
      <span class="input-group-btn">
            <button class="btn btn-secondary" type="button">筛选条件(根据某个字段查询/模糊查询)</button>
        </span>

      <!-- search_xxx xxx代表字段名  search.xxx同左-->
      <input #search_xxx="ngModel" name="search_xxx" [(ngModel)]="search.xxx" type="text" class="form-control" placeholder="请输入会员名称">
    </div>
    <br>

    <!-- 根据日期查询的模板 -->
    <div class="input-group" style="width:50%">
      <span class="input-group-btn">
          <button class="btn btn-secondary" type="button">查询日期</button>
      </span>
      <input #search_date="ngModel" class="form-control" placeholder="请选择日期" type="text" name="search_date" [(ngModel)]="search.date"
        ngbDatepicker #d="ngbDatepicker">
      <span class="input-group-btn">
              <button class="btn btn-secondary" (click)="d.toggle()" type="button">
                  <img src="..\..\..\..\..\assets\system\calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
              </button>
          </span>
      <!-- <input #search_date="ngModel" name="search_date" [(ngModel)]="search.date" type="date" class="form-control" placeholder="请输入查询日期"> -->
    </div>
    <br>

    <!-- 根据类型来查询的模版 -->
    <div class="input-group">
      <span class="input-group-btn">
              <button class="btn btn-secondary" type="button">详情类别</button>
          </span>
      <select class="custom-select" name="search_classify_id" [(ngModel)]="search.classify_id">
                  <option  value="">全部类型</option>
                  <option *ngFor = "let item of classify" [value]="item.id">{{item.name}}</option>
              <!-- <option value="0">状态</option>
                   <option value="1">逆状态</option> -->
          </select>
    </div>
    <br>

    <div class="row">
      <div class="col-6">
        <div class="input-group">
          <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">查询结果</button>
      </span>
          <input type="text" class="form-control text-center bg-white" value="{{page.totalItems}}" readonly>
          <span class="input-group-btn">
        <button class="btn btn-secondary" type="button">条</button>
      </span>
        </div>
      </div>
      <div class="col-6 text-right">

        <button type="submit" class="btn btn-secondary pointer" [disabled]="!searchForm.form"><i class="fa fa-search"></i> 查询</button>
      </div>
    </div>
  </div>
</form>
<br>
<div class="card rounded-0" style="padding:10px 10px;">
  <div class="table-pad">
    <table class="table table-striped">
      <thead>
        <tr>
          <th class="border-0">ID(主键)</th>
          <!-- 需要列表显示的信息 比如显示的字段信息、时间、状态啥的-->
          <th class="border-0">其他信息</th>
          <th class="border-0">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of data;index as i">
          <td>{{item.id}}</td>
          <!-- item.xxx  --xxx表示接口接收到的数据的字段名 -->
          <td>{{item.other}}</td>
          <td>
            <!-- 多状态的显示的模板 -->
            <span [hidden]="item.status!=1">状态1</span>
            <span [hidden]="item.status!=2">状态2</span>
            <span [hidden]="item.status!=0">状态0</span>
          </td>
          <td>{{item.created_time}}</td>
          <td>
            <button routerLink="/lotus/pray/info/{{item.id}}" class="btn btn-outline-info btn-sm"><i class="fa fa-info"></i> 详情</button>
            <!-- <button (click)="delExhibition(alert,i)" class="btn btn-outline-danger btn-sm"><span class="fa fa-trash-o"> 删除</span></button> -->
            <div ngbDropdown class="d-inline-block">
              <button class="btn btn-outline-primary btn-sm" ngbDropdownToggle><i class="fa fa-hand-paper-o"></i> 操作</button>
              <div class="dropdown-menu">
                <!-- 改变状态的模板 -->
                <button (click)="isModify(alert_info,item.id,1)" class="dropdown-item pointer" *ngIf="item.status==0"><span class="badge badge-info">设为XX</span></button>
                <button (click)="isModify(alert_info,item.id,0)" class="dropdown-item pointer" *ngIf="item.status==1"><span class="badge badge-warning">取消XX</span></button>
                <button (click)="delPray(alert_danger,i)" class="dropdown-item pointer"><span class="badge badge-danger">删除</span></button>
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <pagination class="pull-right" previousText="上一页" nextText="下一页" firstText="首页" lastText="尾页" [boundaryLinks]="true" [rotate]="false"
    [maxSize]="5" [totalItems]="page.totalItems" [(ngModel)]="page.currentPage" (pageChanged)="pageChanged($event)" pageBtnClass="btn"
    itemsPerPage="{{page.limitCount}}">
  </pagination>
</div>
<app-modal-window #alert_danger [className]="'card-inverse card-danger'" [title]="'警告'" [message]="'确认删除此订单，操作不可恢复！'"></app-modal-window>
<app-modal-window #alert_info [className]="'card-inverse card-info'" [title]="'提示'" [message]="'确认修改？'"></app-modal-window>

list.component.ts

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  providers: [xxxListService]
})
export class ListComponent implements OnInit {

  constructor() private xxListService: xxListService
}

ngOnInit() {
  this.load();
  this.baojiListService.getClass(classify => this.classify = classify)
}

//分页方法
pageChanged($event) {
  this.page.currentPage = $event.page;
  this.xxxListService.getBaoji(this.page.getWithParams(this.search), pages => {
    this.baoji = pages.rows;
    this.page.totalItems = pages.total;
  });
}


load() {
  //时间查询的附加代码
  console.log(this.search.date)
  if ((this.search.date) && (this.search.date != "undefined-undefined-undefined")) {
    this.search.date = this.search.date.year + "-" + this.search.date.month + "-" + this.search.date.day
  } else {
    this.search.date = '';
  }
  console.log(this.search)
  //正常查询
  this.xxxListService.getxxxList(this.data.getWithParams(this.search), datas => {
    this.data.totalItems = datas.total;
    this.data = datas.rows;
    this.search.date = '';
  });
}

// 删除
delPray(alert: any, id: number) {
  alert.show(() => {
    this.xxxListService.del(this.data[index].id, () => this.data.splice(index, 1))
  })
}

// 状态改变 --针对于正反状态
isModify(alert: any, index: number, is_modify: number) {
  alert.show(() => {
    this.xxxListService.isModify({ id: this.data[index].id, status: is_modify }, () => { this.data[index].is_modify = is_modify });
    this.load();
  })
}
is_modify: number;

change(feature: any, checked: boolean) {
  console.log(feature)
  checked ? this.is_modify = 1 : this.is_modify = 0;
  console.log(this.is_modify)
}


// 分页参数
page: Page = new Page()

// 列表数据
xxx: Array < any > = new Array<any>()

// 查询参数 {里面填写对应的需要筛选条件字段}
search: any = { other: '', date: '' }

}

服务因为接口不一，就不直接贴了，有些地方可能只是理论上是这样....还没有直接测试