After recently adding a new angular component to an existing codebase, I'm struggling to update the view with changes in the model due to my unfamiliarity with angular 4. Despite looking at similar questions, none of the solutions seem to work for me.
The view is straightforward: it features a select dropdown that determines which logs are displayed on the page. Whenever the select option is changed, it triggers the controller to update the visible logs.
View:
<nb-card size="small">
<nb-card-header>
<span>Filters</span>
<br />
<span>Log Severity: </span>
<select id="selectVisibility" [(ngModel)]="severity" (change)="updateVisibleLogs()">
<option value="all">All</option>
<option value="ERR">Error</option>
<option value="WARN">Warning</option>
<option value="INFO">Info</option>
<option value="DEBUG">Debug</option>
<option value="TRACE">Trace</option>
</select>
</nb-card-header>
<nb-card-body>
<div *ngFor="let log of visibleLogs">
{{log.msg}}
</div>
</nb-card-body>
</nb-card>
Controller:
import { Component } from '@angular/core';
@Component ({
selector:'my-selector',
styleUrls: ['./my-selector.component.scss'],
templateUrl:'./my-selector.component.html'
})
export class MyComponent {
updateVisibleLogs() {
let visibleSeverityLevel = this.level(this.severity);
let shouldBeVisible = true;
this.visibleLogs = this.visibleLogs.splice(0);
for (let i = 0; i < this.logObjects.length; i++, ) {
shouldBeVisible = true;
if (!isvalid(this.logObjects[i]))
shouldBeVisible = false;
if (shouldBeVisible)
this.visibleLogs.push(this.logObjects[i].msg);
}
};
}
If you notice anything wrong, please give me a heads up :) It's likely this will be marked as a duplicate question soon!