【Angular】angular范例写法汇总

1. *ngIf与else

<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
    <tr [pSelectableRow]="rowData">
        <td style="width: 3em">
            <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
        </td>
        <ng-container *ngFor="let col of columns">
            <td [ngStyle]="col.style">
                <div *ngIf="col.field === 'sxId' then thenBlock else elseBlock"></div>
                <ng-template #thenBlock>
                    <button *ngIf="rowData[col.field] == 1" class="table-button table-button-1">现行有效</button>
                    <button *ngIf="rowData[col.field] == 2" class="table-button table-button-2">失效</button>
                    <button *ngIf="rowData[col.field] == 3" class="table-button table-button-3">已被修改</button>
                    <button *ngIf="rowData[col.field] == 5" class="table-button table-button-5">部分失效</button>
                </ng-template>
                <ng-template #elseBlock>{{rowData[col.field]}}</ng-template>
            </td>
        </ng-container>
        <td style="width: 4em">
            <a [pRowToggler]="rowData">
                详情
            </a>
        </td>
    </tr>
</ng-template>

2. angular图片加载路径

1. Angular中，html中的路径要写成开头不带/的绝对路径。比如

<img src="assets/hello.png">

2. Angular中，CSS中的路径要写成相对路径，比如

background-image: url('../../assets/hhh.png');

3. 示例

<div class="ui-g-12">
   <ng-container *ngIf="accordFlag; else elseBlock">
     <img src="assets/images/form/accord.png" alt="鉴定一致" width="200">
   </ng-container>
   <ng-template #elseBlock>
     <img src="assets/images/form/disaccord.png" alt="鉴定一致" width="200">
   </ng-template>
</div>

3. tabView与router路由双向选中

页签可以对应路由?index=0

<p-tabView [(activeIndex)]="activeIndex" (onChange)="onTaskListTabChange($event)">
    <p-tabPanel [header]="tasklist.taskListName +  tasklist.total"
                [leftIcon]="tasklist.displayIcon"
                *ngFor="let tasklist of tasklists; let i = index"
                [selected]="i == activeIndex">
    </p-tabPanel>
</p-tabView>

activeIndex = 0; // 当前tab页
ngOnInit() {
	this.activeIndex = +this.route.queryParams['value']['index'] || 0;
}

/** 栏目切换 */
onTaskListTabChange(event) {
    let tasklist = this.tasklists[event.index];
    this.router.navigate([], { queryParams: { index: event.index }}); //更改路由为选中tab下标
}

4. 蚂蚁zorro的nz-table点击选中行添加样式

点击表格某一行，给指定的行添加选中样式
html

<tbody>
   <tr class="editable-row"
       *ngFor="let data of editRowTable.data;let i = index;"
       (click)="rowClick(data,i)"
       [ngClass]="{'msg-table-row-selected': selectedMsgIndex === i}">
     <td>{{ data.id }}</td>
     <td>{{ data.isOpen }}</td>
     <td>{{ data.messageLocation }}</td>
     <td>{{ data.messageStyle }}</td>
     <td>
       <div class="editable-cell" *ngIf="editId !== data.id; else editTpl">
         <div class="editable-cell-value-wrap" (click)="startEdit(data.id, $event)">
           {{ data.messageTemplate }}
         </div>
       </div>
       <ng-template #editTpl>
         <input type="text" pInputText [(ngModel)]="data.messageTemplate" />
       </ng-template>
     </td>
     <td>{{ data.messageLink }}</td>
     <td>{{ data.messageSql }}</td>
     <!-- <td>
       <a nz-popconfirm nzTitle="Sure to delete?" (nzOnConfirm)="deleteRow(data.id)">Delete</a>
     </td> -->
   </tr>
 </tbody>

js

/**
   * @description: 行选中
   * @param {*} data 选中行的数据
   * @param {*} i 选中行的下标
   * @return {*}
   */
  rowClick(data,i){
    this.selectedMsgIndex = i;
    this.taskList = this.taskAllList[i];
    this.buildForm();
  }

css

::ng-deep .msg-table-row-selected{
  background: #e6f7ff !important;
}

持续更新中…