Ng-zorro-antd: Can't reset nz-rate

[vellengs]

Version

0.6.3

Environment

https://ng.ant.design/#/components/rate

Reproduction link

https://ng.ant.design/#/components/rate

Steps to reproduce

https://ng.ant.design/#/components/rate

What is expected?

the rate can be reset.

What is actually happening?

can't

Other?

any way to reset the rate?

[vthinkxie]

by design, you can reset it by set ngModel = 0
https://ant.design/components/rate-cn/

[vellengs]

maybe it's a design issue. you can compare this

http://angular-ui.github.io/bootstrap/#!#rating

on ant design there is not a way to click reset 0 by default setting.
on other hand, if I want to change the behavior, I have to add a extra button to do that.

[vellengs]

BTW, any implement for custom icon?

 character={<Icon type="heart" />}

[vthinkxie]

why is it so difficult for you to just add a button to set ngModel=0 ? it is almost the same as bootstrap

[vellengs]

No， they are different, I do not want to extra button; I just want to click star, if checked then reset

[vellengs]

the issue is simple, communicate is hard💔。
I mean the problem is after you click the star, you can not go back 0.

https://ant.design/components/rate-cn/

That's different with bootstrap.
Is it really difficult to understand that?

[vthinkxie]

I just understand that you want to double click the star to reset it to zero, but it is an bootstrap behavior, not the ant design.
ng-zorro will always keep the same behavior with ant design react version.
By the way, the icon option will be supported when 0.7.0 released, it will be synced with ant design 3.0

[vellengs]

So, there is a problem to reset, right? that was I said the issue about design.
Can you give a way to user change the behavior?

 _clickRate(e: MouseEvent, index: number, isFull: boolean): void {

    // give a event to custom.   给个可以修改行为的地方的事件，这样也不造成设计一致性的问题不是吗？
    e.stopPropagation();
    if (this._disabled) {
      return;
    }
    this._hoverValue = this._value = index + 1;
    this._hasHalf = !isFull && this._allowHalf;
    if (this._hasHalf) {
      this._value -= 0.5;
    }
    this.onChange(this._value);
  }

  _hoverRate(e: MouseEvent, index: number, isFull: boolean): void {
    e.stopPropagation();
    if (this._disabled) {
      return;
    }
    const isHalf: boolean = !isFull && this._allowHalf;
    // 如果星数一致，则不作操作，用于提高性能
    if (this._hoverValue === index + 1 && isHalf === this._hasHalf) {
      return;
    }

    this._hoverValue = index + 1;
    this._hasHalf = isHalf;
  }

[vthinkxie]

You can push ant design to change the default design here https://github.com/ant-design/ant-design/issues, or you can extends the component yourself.

[vellengs]

OK, I push an issue to them.

[vellengs]

Ant Design implement is on the road, When it will be implement on NZ?

[vthinkxie]

@vellengs
will be supported after 0.7.0 released
ref #1065

[vthinkxie]

fixed in version 0.7.0

[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.