Develop Reference

Angular Splitting Object of Array in A4 pages it is working weird and not as excepted

This question it is a continue of the last question.
My last question in Stackoverflow
I am trying to create some A4 pages within the Objects that I have in the json file.
The last guys which answered me it, imediately stopped when I approved the answer.
But the case here it is I need your help to help me further with my problem.
The problem it is that, when the text in one property it is larger then the A4 page the directive it doesn't add new page in realtime but only in reload.
I have for example in my json tree like this.
Category -> SubCategory -> Properties.
So i need to check if the Category it is larger then A4, if the SubCategory is larger and if the property is larger as the height of A4.
I am trying to create something like Xing.
https://lebenslauf.com/
The design it look the same but instead editing in the page I have the edit logic in the modals
Here is the code what I have tried till now.
All for A4 pages
<!-- display: none style will any child that does not have #pageContent local variable defined -->
<div class="content-wrapper" #contentWrapper style="display: block">
<ng-content></ng-content>
</div>
<div class="paginated-view" #paginatedView>
</div>
export class PaginatedViewComponent implements AfterViewInit {
#Input() pageSize: "A3" | "A4" = "A4";
#ViewChild("paginatedView") paginatedView: ElementRef<HTMLDivElement>;
#ViewChild("contentWrapper") contentWrapper: ElementRef<HTMLDivElement>;
#ContentChildren(PageContentDirective, { read: ElementRef })
elements: QueryList<ElementRef>;
constructor(private changeDetector: ChangeDetectorRef ) {}
ngAfterViewInit(): void {
this.updatePages();
// when ever childs updated call the updatePagesfunction
this.elements.changes.subscribe((el) => {
this.updatePages();
});
}
updatePages(): void {
// clear paginated view
this.paginatedView.nativeElement.innerHTML = "";
// get a new page and add it to the paginated view
let page = this.getNewPage();
this.paginatedView.nativeElement.appendChild(page);
let lastEl: HTMLElement;
// add content childrens to the page one by one
this.elements.forEach((elRef) => {
const el = elRef.nativeElement;
// if the content child height is larger than the size of the page
// then do not add it to the page
if (el.clientHeight > page.clientHeight) {
return;
}
// add the child to the page
page.appendChild(el);
// after adding the child if the page scroll hight becomes larger than the page height
// then get a new page and append the child to the new page
if (page.scrollHeight > page.clientHeight) {
page = this.getNewPage();
this.paginatedView.nativeElement.appendChild(page);
page.appendChild(el);
}
lastEl = el;
});
this.changeDetector.detectChanges();
// bring the element in to view port
// lastEl.scrollIntoView({ behavior: "smooth", block: "nearest" });
}
getNewPage(): HTMLDivElement {
const page = document.createElement("div");
page.classList.add("page");
page.classList.add(this.pageSize);
return page;
}
}
#Directive({
// tslint:disable-next-line: directive-selector
selector: "[pageContent]"
})
export class PageContentDirective {
}
This is my HTML when I try to show data
<div style="transition: transform 0.25s ease 0s;transform: scale(1.3);transform-origin: 50% 0px 0px;backface-visibility: hidden;perspective: 1000px;display: block;margin: 0px 11.5385%;font-size:10px;width: 76.9231%;-webkit-font-smoothing: antialiased;">
<app-paginated-view [pageSize]="'A4'" *ngIf="model" class="Grid-grid-column">
<div pageContent class="row">
<div class="col col-lg-7">
<h4>{{currentUser?.firstName}} {{currentUser?.lastName}}</h4>
</div>
<div class="col text-right">
<input type="file" accept="image/*" (change)="readUrl($event)">
<img [src]="url" (change)="readUrl($event)" height="128" style="cursor: pointer">
</div>
</div>
<div pageContent class="Unit-unit-unitGroup"
*ngFor="let personalData of model.personalData; let id = index">
<div pageContent [ngClass]="{ 'isCatActive': selectedCategory === category.PersonalData}">
<ng-container *ngIf="selectedCategory === category.PersonalData" clickOutside (clickOutside)="removeClick()">
<ul>
<li class="fa fa-plus addIconTop" (click)="openDialog()"></li>
<li class="fa fa-plus addIconBottom" (click)="openDialog()"></li>
<li class="fa fa-trash deleteIconRight" (click)="deleteCategory(index)"></li>
<li class="fa fa-arrow-down moveIconDown"></li>
<li class="fa fa-arrow-up moveIconTop"></li>
</ul>
</ng-container>
<div pageContent class="col-md-12" (click)="setCategory(category.PersonalData)">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.PersonalData' | translate}}</div>
</div>
</h3>
</div>
</div>
<div pageContent class="container-fluid">
<ng-container>
<app-personal-data [personalData]="personalData" [model]="model" [id]="id">
</app-personal-data>
</ng-container>
</div>
</div>
</div>
<!-- Career Component -->
<ng-container *ngFor="let careers of model.careers" class="Unit-unit-unitGroup">
<div pageContent class="col-md-12">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.Career' | translate}}</div>
</div>
</h3>
</div>
</div>
<div class="container-fluid" pageContent>
<ng-container *ngFor="let careerObj of careers.subCategories; let i = index">
<app-career [careerObj]="careerObj" [id]="i" [career]="careers" [model]="model"></app-career>
</ng-container>
<ng-container *ngFor="let emptyObj of careers.emptySubContents; let iEmpty = index">
<app-empty-object [emptyObj]="emptyObj" [iEmpty]="iEmpty" [model]="model" [isFromCareer]="true"></app-empty-object>
</ng-container>
</div>
</ng-container>
<!--Education Component-->
<ng-container *ngFor="let education of model.education" class="Unit-unit-unitGroup">
<div pageContent [ngClass]="{ 'isCatActive': selectedCategory === category.Education}">
<ng-container *ngIf="selectedCategory === category.Education" clickOutside (clickOutside)="removeClick()">
<ul>
<li class="fa fa-plus addIconTop" (click)="openDialog()"></li>
<li class="fa fa-plus addIconBottom" (click)="openDialog()"></li>
<li class="fa fa-trash deleteIconRight" (click)="deleteCategory(index)"></li>
<li class="fa fa-arrow-down moveIconDown"></li>
<li class="fa fa-arrow-up moveIconTop"></li>
</ul>
</ng-container>
<div pageContent class="col-md-12" (click)="setCategory(category.Education)">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.Education' | translate}}</div>
</div>
</h3>
</div>
</div>
<div pageContent class="container-fluid">
<ng-container *ngFor="let educationObj of education.subCategories; let i = index" class="col-md-12">
<app-education [educationObj]="educationObj" [id]="i" [education]="education" [model]="model"></app-education>
</ng-container>
</div>
</div>
</ng-container>
<!-- Skills Component-->
<ng-container *ngFor="let skills of model.skills" class="Unit-unit-unitGroup">
<div pageContent [ngClass]="{ 'isCatActive': selectedCategory === category.Skills}">
<ng-container clickOutside *ngIf="selectedCategory === category.Skills" (clickOutside)="removeClick()">
<ul>
<li class="fa fa-plus addIconTop" (click)="openDialog()"></li>
<li class="fa fa-plus addIconBottom" (click)="openDialog()"></li>
<li class="fa fa-trash deleteIconRight" (click)="deleteCategory(index)"></li>
<li class="fa fa-arrow-down moveIconDown"></li>
<li class="fa fa-arrow-up moveIconTop"></li>
</ul>
</ng-container>
<div pageContent class="col-md-12" (click)="setCategory(category.Skills)">
<div class="row height">
<div class="col-md-4 col-sm-6 text-right tLine"></div>
<h3 class="first-template-paragraphTitle Paragraph-paragraph-title height">
<div class="Text-text-wrapper">
<div class="Text-Text-text">{{'category.Skills' | translate}}</div>
</div>
</h3>
</div>
</div>
<div pageContent class="container-fluid">
<ng-container *ngFor="let skillObj of skills.subCategories; let i = index" class="col-md-12">
<app-skills [skillObj]="skillObj" [id]="i" [skills]="skills" [model]="model"></app-skills>
</ng-container>
</div>
</div>
</ng-container>
</app-paginated-view>
</div>
And this is the css
.A4 {
width: 595px;
height: 842px;
padding: 25px 25px;
position: relative;
}
If you want to see more code, here is the stackblitz.
Stackblitz
And here is the screenshot which is the current design.
As you can see here the space in the Career it is very large it should not be like that.
It should add the text based on the height and if is alrger then cut the text and the other text add to new page.

View not updated after modifying the array data in angular 6

I am deleting data from array and trying to update the view but it is not working.
async deleteProduct(e) {
try {
const data = await this.rest.get(environment.apiUrl + `/api/seller/products/delete/?id=${e.target.id}`);
data['success'] ? this.products = (this.products.filter(e => e != (data['products'].id))) : this.data.error(data['message']);
} catch (error) {
this.data.error(error['message']);
}
}
Html:
<section id="myProducts">
<div class="container p-5">
<app-message></app-message>
<div *ngIf="!products" class="m-auto">
<h1 class="text-center display-3 mt-5">
<i class="fa fa-spinner fa-spin"></i>
</h1>
</div>
<h3 *ngIf="products && !products.length" class="display-2 text-center mt-5">My Products is Empty</h3>
<div *ngIf="products && products.length" class="row">
<div class="col">
<h4 class="display-4">My Products</h4>
<div class="row">
<div class="offset-10 col-2 d-none d-md-block">
<p>
<small class="text-muted">Price</small>
</p>
</div>
</div>
<hr class="mt-0">
<div *ngFor="let product of products" class="product">
<div class="row">
<div class="col-4 col-md-2">
<a routerLink="/product/{{ product.id }}">
<img src="{{ product.image }}" alt="image" class="img-fluid img-thumbnail">
</a>
</div>
<div class="col-5 col-md-8">
<h5>
<a routerLink="/product/{{ product.id }}">{{ product.title }}</a>
<p class="m-0">
<small class="text-muted">{{ product.category.name }}</small>
</p>
</h5>
</div>
<div class="col-2">
<h6 class="font-weight-bold text-danger" >{{ product.price | currency : 'INR' }}</h6>
</div>
<div class="col-2">
<button type="button" class="btn btn-info" id="{{product.id}}" (click)="editProduct($event)" [disabled]="btnDisabled">Edit</button>
</div>
<div class="col-2">
<button type="button" class="btn btn-info" id="{{product.id}}" (click)="deleteProduct($event)" [disabled]="btnDisabled">Delete</button>
</div>
</div>
<hr>
</div>
</div>
</div>
</div>
</section>
After deleting the item from array, I am trying to update the object like this:
this.products = (this.products.filter(e => e != (data['products'].id)))

It seems so that your view does not check the changes of your products array.
So I would say trigger it manually:
InjectChangeDetectorRef to trigger change detection manually.
constructor(private cd: ChangeDetectorRef){....}
And in your method call this.cd.detectChanges():
async deleteProduct(e) {
...
data['success'] ? this.products = (this.products.filter(e => e != (data['products'].id))) : this.data.error(data['message']);
this.cd.detectChanges();
...
}

you are comparing e to != e['products'].id ..
it is not true.
i think you should be checking the variable which holds the id in your "e"
which means
e.id != ...or something like so.
I Hope it is working.

How to select data from DIV's with something like $this?

given the following code snippet:
<div class="container-fluid" id="networdapp">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>
How can I read data from a random div/unknown position in for div? I can't use PHP.
This <div ... id="networdapp"> is created depending on the results from a database. How can I get the data {{result.title}} from a random div when I click the "Details" button from it?
I tried to get it using JQuery but I ended up by selecting all data from all DIVs. Then I was thinking if I can do that with $this and I tried but still can't do it.
EDIT: There is the generated html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Website Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">WebSite for testing</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarWw1" aria-controls="navbarWw1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarWw1">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="map">Map</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about">About</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" id="myInput" type="search" onkeyup="myFunction()" placeholder="Find your next memories!">
</form>
</div>
</nav>
<div class="container-fluid" id="networdapp" style="display:none;">
<div class="row" >
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light" >
<div class="card-header text-center" > {{ result.title }} </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
<a href="/details" class="btn btn-info" >Details</a>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
function myFunction() {
var input , filter , OK = false ;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
if(filter.length > 0 ) {
document.getElementById("networdapp").style.display = "";
$( ".col-sm-6" ).each(function( index ) {
if ($(this).text().toUpperCase().indexOf(filter) > -1){
this.style.display="";
}else{
this.style.display="none";
//document.getElementById("networdapp").style.display = "none";
}
});
}
else{
document.getElementById("networdapp").style.display = "none";
}
}
</script>
<script type="text/javascript">
const vm = new Vue({
el: '#networdapp',
data: {
results:[]
},
mounted() {
axios.get('/getJson')
.then(response => {
this.results = response.data;
})
.catch( e => {
console.log(e);
});
}
});
</script>
</html>

The div has the class card-header, so...
$('.card-header').text()
//or
document.getElementsByClassName('card-header')[0].innerText
//or
document.querySelector('.card-header').innerText
//or
document.querySelectorAll('.card-header')[0].innerText
However, you want to get the one related to the button clicked. So that could look something like...
//create a delegate event handler on the container for all the buttons
$('#networdapp').on('click', '.btn.btn-info', function (e) {
//prevent the link so the runnable snippet stops jumping back to the top
e.preventDefault();
//find the parent div with the card class that is the parent to both
//the link and the title
var $card = $(this).closest('.card');
//find the nested card header in the card clicked
var $cardHeader = $card.find('.card-header');
//console log the text
console.log($cardHeader.text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" id="networdapp">
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 1 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 2 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
<div class="row">
<div v-for="result in results" class="col-sm-6" >
<div class="card m-3 h-240 bg-light">
<div class="card-header text-center"> title 3 </div>
<div class="card-body" style="height:200px" >
<p class="card-text" v-html="result.prevDesc"></p>
</div>
<div class="card-footer bg-transparent border-info">
Details
</div>
</div>
</div>
</div>
</div>

Using jQuery:
$("#networdapp .card-header.text-center").html()
So:
$(".btn.btn-info").click(function(){
console.log( $("#networdapp .card-header.text-center").html() );
})
Or:
$(".btn.btn-info").click(function(){
console.log( $(this).closest("#networdapp").find(".card-header.text-center").html() );
})

You can select div then use the context to select the button r other elements within.
$(".card").each(function(){
var that = this; // <--- the current div
var header = $(that).find(".card-header");
var detailBtn = $(that).find(".btn-info");
// set event handlers here
// Example:
detailBtn.click(function(){
alert(header.text());
});
});
Here is a working Example

Using jquery
$(this).parents("#networdapp").find(".card-header.text-center").text();
To remove unneccesay spaces you can use trim
$.trim($(this).parents("#networdapp").find(".card-header.text-center").text());

display json data from array

I'm trying to display some json data I got from a get request. So far I've been able to display other arrays with no problem, but I'm having trouble displaying this particular array for some reason, and I'm not getting any errors.
the one that won't display correctly is the showtimes array.
<div *ngIf="show">
<div *ngFor="let shows of show"class="showtime">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{shows.title}}</h3>
</div>
<div class="panel-body" >
<div class="row">
<div class="col-md-7 col-sm-5 col-xs-12 ">
<img class="thumbnail movie_pic" src="http://developer.tmsimg.com/{{shows.preferredImage.uri}}?api_key={{api}}"><br>
</div>
<div class="col-md-5 col-sm-7 col-xs-12">
<ul class="list-group">
<li class="list-group-item">Genres: {{shows.genres}}</li>
<li class="list-group-rel">Release Date: {{shows.releaseDate}}</li>
<li class="list-group-rel">{{shows.longDescription}}</li>
<li *ngFor="let shows of show.showtimes" class="list-group-rel">shows.theatre.name</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>

You are missing {{}} expression
<li *ngFor="let shows of show.showtimes" class="list-group-rel">{{shows.theatre.name}}</li>
EDIT
Change it to some other variable name, since you are already using shows,
<li *ngFor="let showdetail of show.showtimes" class="list-group-rel">{{showdetail.theatre.name}}</li>

As it looks from your snapshot, the array of objects is stored in variable showtimes, if that is the case, try the below code:
<li *ngFor="let detail of showtimes" class="list-group-rel">
{{detail.theatre.name}}
</li>

A nested ngFor loop solved the problem..
<div *ngFor="let shows of show">
<div *ngFor="let detail of shows.showtimes">
<p>{{detail.theatre.name}}</p>
</div>
</div>
works perfectly, thanks for the help

*ngIf is not working like other *ngIf's

I encountered a strange problem with my *ngIf on one particular variable isAdmin (which should allow me to display the list of users in userList). I'm not sure why its behaving different from all the other *ngIf statements in the same component.
heres a snippet of my js code for the component. This is where isAdmin is being switched from false to true if the user is an Admin.
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
this.usersList = Meteor.users.find({}).fetch(); //update the users list automatically
this.currentUser = Meteor.user(); //update the current user automatically
this.isLoggingIn = Meteor.loggingIn();
this.isLoggedIn = !!Meteor.user();
this.checkAndSub();
});
});
}
checkAndSub(){
if(this.isLoggingIn){
Meteor.call('checkAdmin', function(error, result) {
if (error) {
this.errors.push(error.reason || "call from server has an error");
}
this.isAdmin = result;
console.log(this.isAdmin);
if(this.isAdmin){
Meteor.subscribe("userList");
}
else console.log("User is not admin");
});
}
}
Heres the corresponding HTML
<span *ngIf="viewDetails">
<div class="pizza_details" id="pizza_details" [ngClass]="{'show' : viewDetails, 'hide' : !viewDetails}">
<div class="row">
<!--PIZZA DESCRIPTION PANEL-->
<div class="pizza_description col-lg-4 col-md-4 col-sm-12 col-xs-12">
<div class="panel" id="description_panel">
<div class="panel-body">
<div>
{{error}}{{message}}
<span *ngIf="isAdmin">
<p><h2>User List</h2></p>
<ul>
<li *ngFor="let iterate of usersList">
_id: {{iterate._id}}
<p>Emails: {{iterate.emails}}</p>
<p>username: {{iterate.username}}</p>
<p>isadmin: {{iterate.isAdmin}}</p>
</li></ul>
</span>
</div>
<h1>Description: </h1>
{{currentPizza.description}}
<p><button type="button" class="btn active" role="button" (click)="toggle()">Toggle</button></p>
</div>
</div>
</div><!--&&&&pizza description collapes&&&&-->
<!--STARTING THE "SECOND PANEL" FOR PICTURES, STYLE, VOTES, AND MODS-->
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<div class="row">
<div class="pizza_picture col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="picture_panel">
<div class="panel-body" style="padding:0px;">
<img src="{{currentPizza.imageUrl}}" class="img-rounded" style="max-height: 400px; width:100%;">
</div>
</div>
</div><!--&&&&pizza picture collapse&&&&-->
</div>
<div class="row">
<div class="pizza_style col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="style_panel">
<div class="panel-body">
<h4>Style:</h4>{{currentPizza.style}}
<h4>Location:</h4>
<span *ngIf="currentPizza.location.state">
{{currentPizza.location.state}} ,
</span>
{{currentPizza.location.country}}
<h4>Brand: </h4>{{currentPizza.brand}}
</div>
</div>
</div><!--&&&&pizza style collapse&&&&-->
<div class="pizza_votes col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div class="panel" id="vote_panel">
<div class="panel-body">
<h3>Pizza Spectrum Score: </h3>
{{currentPizza.votes}}
</div>
</div>
</div><!--&&&&pizza votes collapse&&&&-->
</div>
<div class="row">
<div class="pizza_users col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="panel" id="user_panel">
<div class="panel-body">
<h3>SubmittedBy: </h3>
{{submittedBy(currentPizza._id)}}
<ul><li *ngFor="let i of currentPizza.userUpvotes">{{i}}
</li>
</ul>
<p><button type="button" id="exit_details_btn" class="btn active" role="button" (click)="toggleDetails()">Exit Details</button>
<button type="button" id="upvote_btn" class="btn active" role="button" (click)="upVote(currentPizza._id)">Upvote</button>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="downVote(currentPizza._id)">Downvote</button></p>
<button type="button" id="downvote_btn" class="btn active" role="button" (click)="cc()">publish all users</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
I know isAdmin is true, but nothing shows up. If I create a separate button to toggle it then my userLIst shows up. Why won't it display properly when the page is loaded?
Thanks

Try changing the span *ngIf to a div. I simple check could be to temporary change the content in the span to a static text ex: hello. Can you then see the hello? If true it's a markup problem

ngZOne.run doesn't mark a component for change detection. All it does is execute the callback function inside the Angular error handler.
You need to inject ChangeDetechRef and call markForCheck.
public constructor(private cdr: ChangeDetectorRef, private zone: NgZone) {
}
then elsewhere:
_initAutorun(): void {
this.autorunComputation = Tracker.autorun(() => {
this.zone.run(() => {
//.....
this.checkAndSub();
this.cdr.markForCheck(); // <--- mark component dirty
});
});
}