Ng-zorro-antd: [nz-upload] nzDisabled value not update when fileList change

[giscafer]

Version

0.6.14

Environment

all

Reproduction link

https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/src/showcase/nz-demo-upload/nz-demo-upload-picture-style.component.ts

Steps to reproduce

set disabled when fileList.length >=3

  [nzDisabled]="fileList.length >=3"

demo:

// tslint:disable
import { Component } from '@angular/core';
import { NzMessageService } from './../../components/message/nz-message.service';
import { UploadFile } from './../../components/upload/interface';

@Component({
  selector: 'nz-demo-upload-picture-card',
  template: `
  <div class="clearfix">
    <nz-upload
      nzAction="https://jsonplaceholder.typicode.com/posts/"
      nzListType="picture-card"
      [(nzFileList)]="fileList"
      [nzMultiple]="true"
      [nzDisabled]="fileList.length >=3"
      [nzPreview]="handlePreview">
        <i class="anticon anticon-plus"></i>
        <div class="ant-upload-text">Upload</div>
    </nz-upload>
    <nz-modal [nzVisible]="previewVisible" [nzContent]="modalContent" [nzFooter]="null" (nzOnCancel)="previewVisible=false">
      <ng-template #modalContent>
        <img [src]="previewImage" [ngStyle]="{ 'width': '100%' }" />
      </ng-template>
    </nz-modal>
  </div>
  `,
  styles: [`
  :host ::ng-deep i {
    font-size: 32px;
    color: #999;
  }
  :host ::ng-deep .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
  `]
})
export class NzDemoUploadPictureCardComponent {
  fileList = [{
    uid: -1,
    name: 'xxx.png',
    status: 'done',
    url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  }];
  previewImage = '';
  previewVisible = false;

  constructor(private msg: NzMessageService) {}

  handlePreview = (file: UploadFile) => {
    this.previewImage = file.url || file.thumbUrl;
    this.previewVisible = true;
  }

}

What is expected?

file select is normal,the upload btn is not disabled

What is actually happening?

this._btnOptions.disabled not update when the fileList has changed(eg:remove file)

Other?

[giscafer]

A temporary solution
https://github.com/NG-ZORRO/ng-zorro-antd/blob/9a5621efa111f333a74d2edfc953506de4363205/src/components/upload/nz-upload.component.ts#L416

  ngOnChanges(changes: { [P in keyof this]?: SimpleChange } & SimpleChanges): void {
    if (changes.nzFileList) {
      (this.nzFileList || []).forEach(file => file.message = this.genErr(file));
      // if (!changes.nzFileList.firstChange) return; // here is the problem
    }
    if (this.inited) {
      if (changes.nzPreview || changes.nzCustomRequest || changes.nzBeforeUpload || changes.nzRemove) return;
    }
    this.zipOptions()._setClassMap();
  }

[mianxiaoqian]

0.6.14 still not work. When will this repair work?

[vthinkxie]

@mianxiaoqian not published yet.

[mianxiaoqian]

When will publish the new version? My project have encountered this problem

[vthinkxie]

@mianxiaoqian try it now

[mianxiaoqian]

Thanks a lot

[lock[bot]]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.