Can someone help me figure out how to display this array of objects in Angular?
var list = [{
collaborators: [{
id: 1,
name: "test"
}]
},
{
colleagues: [{
id: 2,
name: "colleague2"
}]
}
]
I attempted the following approach:
<div *ngFor="let el of list">
<div *ngFor="let e of el.collaborators">
{{e.id}}
</div>
</div>
Unfortunately, it doesn't seem to be working as intended
Let's analyze your roster
roster[0] will result in
{members: [{id: 1, name: "test"}]}
while roster[1] will result in
{players: [{id:2, name: "player2"}]}
Now let's iterate
<div *ngFor="let player of roster[0].members">
{{player.id}}
</div>
<div *ngFor="let player of roster[1].players">
{{player.id}}
</div>
We can also merge them like this
<div *ngFor="let group of roster">
<ng-container *ngIf='group.members'>
<div *ngFor='let member of group.members'>
{{member.id}}
</div>
</ng-container>
<ng-container *ngIf='group.players'>
<div *ngFor='let player of group.players'>
{{ player.id }}
</div>
</ng-container>
</div>
You have overlooked the following (allow e) :
<div *ngFor="let e of el.collaborators">
{{e.id}}
</div>
My React component uses Material-UI (MUI) and I'm working on making it mobile responsive. Here's how it looks currently: https://i.sstatic.net/kxsSD.png But this is the look I want to achieve: https://i.sstatic.net/kJC2m.png Below is the code ...
Currently, I am utilizing In-Cell Editing on a kendo-grid-column. The example provided here demonstrates how you can define the editor attributes for the column. For my specific column, I want to be able to edit dates, so I require a date picker. This can ...
When I attempted to perform a save operation in MongoDB using Mongoose, the code I initially tried was not functioning as expected. Upon conducting a search online, I came across a solution that worked successfully; however, TypeScript continued to flag an ...
Following a code refactor on a separate branch, the fetch function ceases to work in any branch despite everything else functioning correctly. The error message reads: ...server/KE/utils.ts:44 const response = await fetch( ^ ReferenceError ...
I am currently working on integrating a main module and a feature module that consists of various components. Below, I have provided the configuration for multiple routes within the feature routing file. const priorityRoutes: Routes = [ { path: &a ...
Is there a way to make the like count increment and decrement with the same button click? Currently, the code I have only increments the like count. How can I modify it to also allow for decrements after increments? <button (click)="toggleLike()"> ...
After cloning a git repository, I encountered an issue when trying to run the app in the browser. Despite running "npm install," some dependencies were not fully installed. Upon attempting to run "npm install" again, the following errors were displayed: np ...
After defining the user schema, I have encountered an issue with TypeScript. The error message Property 'comparePassword' does not exist on type '() => Promise<(Document<unknown, {}, IUser> & Omit<IUser & { _id: Object ...
I need to retrieve the orders from the database using Prisma based on the user's email (authenticated via Google Provider). Here is the repository - https://github.com/Jayesh-kahnani/Snatch Here is the API. // src/app/api/order/route.ts import { Next ...
I am encountering an issue with the code in my authService constructor( private afAuth: AngularFireAuth, private db: AngularFireDatabase, private router: Router ) { this.authState = afAuth.authState; this.authState.subscribe((use ...
I have implemented a custom material-color palette where I defined the primary and accent palettes with specific shades as shown below: $my-app-primary: mat-palette($md-lightprimary ,500,900,A700 ); $my-app-accent: mat-palette($md-lightaccent, 500,900 ...
@Directive({ selector: '[myHighlight]' }) export class HighlightDirective { static test: number = 5; constructor(private el: ElementRef) { } highlight(color: string) { this.el.nativeElement.style.backgroundColor = color; } } In re ...
I'm currently working on an Angular 4 application using Visual Studio 2017 with .NET Core. I need to figure out how to access configuration keys from appsetting.json in my TypeScript file. I know how to do it in the startup.cs file, but I'm strug ...
How can I successfully implement a Websocket in Ionic 3 and Angular 4? I attempted to use the socket.io-client package, but when I try to connect the websocket using the following code: this.socket = io(this.urls.websocket, {transports: ['websocket& ...
Is there a concise TypeScript one-liner that can replace the arrayOrMemberToArray function below? function arrayOrMemberToArray<T>(input: T | T[]): T[] { if(Arrary.isArray(input)) return input return [input] } Trying to cram this logic into a te ...
I attempted to implement migration in TypeORM as shown below: TableExample.entity.ts @Entity({ name: 'table_example' }) export class TableExampleEntity { constructor(properties : TableExampleInterface) { this.id = properties.id; ...
I am making a request to an OTP API from my Node.js application. The goal is to pass the response from the OTP API to my Angular app. Here is how the API service looks on Angular: sendOtp(params): Observable<any> { return this.apiService.post(&q ...
I need to filter or eliminate certain files from a FileList object that I obtained from a directory chooser. <input type="file" accept="image/*" webkitdirectory directory multiple> Within my .ts file: public fileChangeListener($event: any) { let ...
Can anyone help me with this issue? I have Node v8.10.0 and I'm attempting to follow a beginner tutorial on Electron + Typescript which can be found at the following link: https://github.com/electron/electron-quick-start-typescript Here is the full e ...
Could someone please shed some light on what might be causing the issue in my code? Thank you in advance! webpack: Compilation Failed. My Angular CLI: 1.6.3 Node: 8.9.4 OS: Windows 32-bit Angular: 5.2.1 Error Message: ERROR in ./node_modules/css-loader ...