I have a component that displays some data collected from a Microsoft API. The resulting data (which is in the form of a custom interface we created), is returned and stored in an observable within that component.
When iterating through the objects in the HTML of the component, it populates a mat grid tile for each entry. This grid tile, when the component is initialized, does not populate at all unless you initialize the component again.
Below is the code used to display the data:
HTML:
<mat-card class="wiki-page-card">
<h1 class="headline">Wiki Page</h1>
<mat-divider [inset]="true"></mat-divider>
<br>
<h2 class="headline-h2">Below are a few helpful links to help get you started:</h2>
<br>
<mat-grid-list cols="8" rowHeight="100px" gutterSize="20px">
<mat-grid-tile *ngFor="let wikiPage of wikiObservable$ | async"
[colspan]="1"
[rowspan]="1"
[style.background]="'black'"
class="grid-style">
<a
href="{{wikiPage.remoteUrl}}"
target="_blank"
class="text-inside-grid">{{wikiPage.name}}</a>
</mat-grid-tile>
</mat-grid-list>
</mat-card>
TS:
import { Component, OnInit} from '@angular/core';
import { lastValueFrom } from 'rxjs';
import { WikiPage, WikiResponseValue, WikiSubpage } from 'src/app/shared/datasource/interfaces/wiki.interface';
import { WikiService } from 'src/app/shared/datasource/services/devops/wiki/wiki.service';
import { BehaviorSubject, Observable } from 'rxjs';
@Component({
selector: 'app-wikipage',
templateUrl: './wikipage.component.html',
styleUrls: ['./wikipage.component.scss']
})
export class WikiPageComponent implements OnInit {
wikiObservable$ = new BehaviorSubject<WikiSubpage[]>([])
wikiPagesResult: WikiPage[] = []
wikiSubPages: WikiSubpage[] = []
constructor(
private wikiService: WikiService,
{}
async ngOnInit() {
await (this.getWikiList())
}
async getWikiList(){
const wikiPages$ = this.wikiService.getWikiPage();
let results = (await lastValueFrom(wikiPages$)).value
results.forEach(
async (wikiPage: WikiResponseValue) => {
let wikiResult : WikiPage = {
apiUrl : wikiPage.url,
href : wikiPage.remoteUrl,
name : wikiPage.name,
projectId : wikiPage.projectId,
type : wikiPage.type,
wikiId : wikiPage.id
}
console.log(wikiResult)
this.wikiPagesResult.push(wikiResult)
this.getWikiPages(wikiResult)
console.log(this.wikiSubPages)
},
)
console.log(this.wikiPagesResult)
}
async getWikiPages(wikiPage: WikiPage){
const wikiSubPages$ = this.wikiService.getWikiSubPages(wikiPage.apiUrl)
let results = (await lastValueFrom(wikiSubPages$))
results.subPages.forEach(async (subPage: WikiSubpage) =>{
console.log(subPage)
let subPageDetails = await (this.wikiService.getWikiSubPagesDetail(subPage.url))
subPageDetails.forEach((fullPage: WikiSubpage) => {
let pageName = (fullPage.path).replace('/', '')
let subPageResult: WikiSubpage = {
content : fullPage.content,
gitItemPath : fullPage.gitItemPath,
id : fullPage.id,
name : pageName,
remoteUrl : fullPage.remoteUrl,
path : fullPage.path,
url : fullPage.url,
}
this.wikiSubPages.push(subPageResult)
})
})
console.log(this.wikiSubPages)
this.wikiObservable$.next(this.wikiSubPages)
console.log(this.wikiObservable$.value)
}
}
The HTML is not displayed when user is redirected to the page after logon. We have a designated routerlink button that allows the user to go back to the page if they ever navigated off of the page. When this button is clicked, the data is displayed.
I have tried using async as shown above, i have tried changing the way we store the data when ngOnInit is initialized. I dont have much else ideas as to why this is happening, so i dont know of any possible other solutions.
when consulting the console logs, all the data is there at the time of execution, it just isnt being displayed.
I have a feeling that my grasp of LifeCycleHooks might not be 100% up to scratch, either that or i dont understand observables that well.
Any tips would be greatly appreciated as this issue is also persisting on another component, and whatever the outcome is here i can most probably implement in the other faulty component too.
