*ngIf and {{}} breaks Tabs

Topic: *ngIf and {{}} breaks Tabs

ak.leimrey pro asked 6 years ago

Hello everyone,

As they title says, I have the issue that when I use the *ngIf directive or interpolation {{}} on ANY component that also has a tab, it basically breaks it entirely. I've gotten pretty desperate by now and I can't even tell what's been going on anymore.

https://imgur.com/e0r3Gw6 - Whenever I opened the page, it threw tons of errors, so I had to disable them. Then I noticed, that my tab element wasn't even existing anymore.I wanted to try out, if the function and my button worked. Technically, it didn't even need access to any of my Data Services to break it; Just using the *ngIf directive is enough to break the tabs, the same goes for using interpolation

https://imgur.com/QSG1zsc - When I clicked my button, I got the object that I wanted and I could render them on my page, but only then suddenly the tabs were also working again.

monitoring-component.html

<div>

<h4>

Machine Monitoring

</h4>

<hrclass="divider">

<!-- The header for the Equipment information -->

<div>

<divclass="equi-info">

<formclass="form-inline">

<divclass="md-form form-group">

<input #equiSearchmdbActivetype="text"class="form-control"id="equi-search-mask">

<labelclass="active"for="equi-search-mask">Equipment No. or Device ID</label>

</div>

<divclass="md-form form-group">

<aclass='btn btn-indigo btn-lg waves-light'mdbRippleRadius (click)="getEquipment(equiSearch.value)">Refresh</a>

</div>

<div *ngIf="equipment.id">

<p>Serial number: {{equipment.modelType}}</p>

<p>Mac address: {{equipment.deviceId}}</p>

<p>Communication type: {{equipment.comType}}</p>

</div>

</form>

</div>

<hrclass="divider">

<!-- Nav tabs -->

<div>

<mdb-tabset [buttonClass]="'classic-tabs tabs-indigo'" [contentClass]="'card'"class="classic-tabs">

<!--Panel 1-->

<mdb-tabheading='<i class="fa fa-pie-chart" aria-hidden="true"></i> Equipment/Service Item Data'>

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<item-data></item-data>

</div>

</div>

</mdb-tab>

<!--Panel 2-->

<mdb-tabheading='<i class="fa fa-bell" aria-hidden="true"></i> Alarms'>

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<equip-alarms></equip-alarms>

</div>

</div>

</mdb-tab>

<!--Panel 3-->

<mdb-tabheading='<i class="fa fa-book" aria-hidden="true"></i> Meter Reading'>

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<machine-meter-reading></machine-meter-reading>

</div>

</div>

</mdb-tab>

<mdb-tabheading='<i class="fa fa-clock-o" aria-hidden="true"></i> History'>

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<machine-history></machine-history>

</div>

</div>

</mdb-tab>

<mdb-tabheading="OPS Data">

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<machine-ops-data></machine-ops-data>

</div>

</div>

</mdb-tab>

<mdb-tabheading="Equipment/Service Item Alarm Rules">

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<machine-item-alarm-rules></machine-item-alarm-rules>

</div>

</div>

</mdb-tab>

<mdb-tabheading="<i class='fa fa-gears'></i> Advanced">

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<machine-advanced></machine-advanced>

</div>

</div>

</mdb-tab>

<mdb-tabheading="Last Meter Operations">

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<last-meter-operations></last-meter-operations>

</div>

</div>

</mdb-tab>

<mdb-tabheading='<i class="fa fa-exchange" aria-hidden="true"></i> ERP Meter Requests'>

<divclass="row">

<divclass="col-12">

<br>

<!-- Add Component here -->

<erp-meter-req></erp-meter-req>

</div>

</div>

</mdb-tab>

</mdb-tabset>

</div>

</div>

ak.leimrey pro commented 6 years ago

Okay, I solved it. While the *ngIf worked and basically validated the incoming value correctly, I should have used the base object. So instead of *ngIf="equipment.id" just *ngIf="equipment" Sorry for the hassle, this question can be closed. Sometimes it just really helps stepping away from a problem to re-evaluate it with a calm mind. Though I still struggle to understand, why it broke the tab. It wasn't even in the same <div>

Add comment

Closed

This topic is closed.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

ak.leimrey

Pro User 179Support score
28Questions 12Answers 0Snippets