search

edcarroll / ng2-semantic-ui

Semantic UI Angular Integrations (no jQuery)
https://edcarroll.github.io/ng2-semantic-ui/
MIT License
615 stars 224 forks source link

"Expression has changed after it was checked": sui-tabset with *ngFor #331

Open GuyShaanan opened 6 years ago

GuyShaanan commented 6 years ago

Bug description:

When sui-tabset is created only with *ngFor (i.e. no static tabs) the following error is thrown:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

See the attached plunker. When you uncomment this line <!--<a class="item" suiTabHeader="static">Static</a>--> the error goes away.

Link to minimally-working plunker that reproduces the issue:

http://plnkr.co/edit/V0qg9B?p=preview

Version of Angular, ng2-semantic-ui, and Semantic UI:

Angular: 5.0.5

ng2-semantic-ui: 0.9.6

Semantic UI: 2.2.13

francoisbillard commented 6 years ago

Same issue with suiDropdown ...

genuinefafa commented 6 years ago

I did some test in 4.3.5, same issue. Pretty strange.

Also did some workaround, style="display:none;" in static tabHeader and tabContent did the trick.

claudiu909 commented 5 years ago

@genuinefafa i dont understand, can you give more details of the workaround please?

genuinefafa commented 5 years ago

@claudiu909 sorry for the late response, i was out of this world;

add a static container and title that is hidden using css; something like this:

<sui-tabset *ngIf="dynamicContentTabs$ | async as tabs">
    <div class="ui grid">
      <div class="eleven wide stretched column">
<!-- style hide-this can be applied here too doing a display:none -->
          <div class="ui segment" suiTabContent="static">
            <p class="ui message info">dummy data here.</p>
          </div>

          <div class="ui segment" *ngFor="let tabContent of tabs; let j = index" [suiTabContent]="j">
            <p>{{tabContent.content}}</p>
          </div>

      </div>

      <div class="five wide column">
        <div class="ui vertical fluid right tabular menu">
<!-- style hide-this does a display:none -->
            <a class="item hide-this" suiTabHeader="static">Dummy Static content</a>
            <a class="item" *ngFor="let tab of tabs; let i = index" [suiTabHeader]="i"
            [isDisabled]="tab.isDisabled">
                {{tab.content}} <!-- or any other angular magic here -->
            </a>
        </div>
      </div>
    </div>
  </sui-tabset>

let me know if that works for you!

lozzadude commented 5 years ago

I get the same ExpressionChangedAfterItHasBeenCheckedError when using *ngIf on static tabs.

Here's an example: https://stackblitz.com/edit/ng-semantic-ui-tabs