Is it possible to pass two arguments with ngFor? Here is an example that I would like to achieve:
<mat-card *ngFor="let room of arr; let floor of floorArr">
<mat-card-content>
<h3>Room Number: {{room}}</h3>
<p>Floor: {{floor}}</p>
</mat-card-content>
</mat-card>
I need help figuring out the correct way to implement this. Can you assist me with this?
To access the array elements, consider adding an index reference:
<mat-card *ngFor="let room of arr; let i = index">
<mat-card-content>
<h3>Room Number: {{room}}</h3>
<p>Floor: {{floorArr[i]}}</p>
</mat-card-content>
</mat-card>
Alternatively, you can combine the arrays and iterate through them as follows:
getArray(){
return this.arr.map((a, i) => ({ room: a, floor: this.floorArr[i] }));
};
<mat-card *ngFor="let obj of getArray()">
<mat-card-content>
<h3>Room Number: {{obj .room}}</h3>
<p>Floor: {{obj.floor}}</p>
</mat-card-content>
</mat-card>
After spending many hours attempting to make this work, I still haven't had any success... I am wondering: How can I utilize TSLint for a .js file? The reason behind this is my effort to create the best possible IDE for developing numerous JavaScrip ...
Here is a snippet of HTML code that I'm working with: <!-- Toggle show hide --> <ng-container *ngFor="let plateValue of plateValues; let i=index"> <button (click)="toggle(plateValue)">{{i}}. {{ btnText }}</button> ...
Question regarding the [attr.name] and [name], I am utilizing querySelectorAll in my Typescript as shown below: this._document.querySelectorAll("input[name='checkModel-']") However, when I define it in the HTML like this: <input [name]="check ...
I have created a function called get(o, key), which is designed to work with any Object that meets the criteria of the { get: (key: K) => R } interface. Furthermore, I am interested in restricting the result variable R to not allow it to be undefined. ...
I am currently in the process of replicating a platform known as Kualitee.com, which serves as a test-management tool utilized by QA Engineers. Within Kualitee, users can access multiple projects, each containing various test cases and team members. The ab ...
I recently followed the typescript guide at https://webpack.js.org/guides/typescript/ After running webpack in "production" mode, I noticed that it emitted very minimal output. Below is the code from my src/index.ts file: export function foo() { return ...
I am looking for guidance on injecting a component dynamically into another in Angular 4, as well as passing values from the parent component to the child component. If anyone can provide a sample of working code, it would be greatly appreciated. ...
When attempting to retrieve the value from the input field using formArrayName, I am encountering an issue where it returns null instead. The console shows that I can get the value for client name but not for secrets. What I need is for the returned value ...
Seeking assistance with filtering table values based on the selected filter. I plan to utilize this ngbDropdown as my filter. If I choose company A, only entries related to company A will be displayed in the table. I am unsure about how to connect the f ...
Utilizing Angular2's HTTP module, I am sending HTTP requests. Once a user logs in, the backend server creates a cookie session which is then used by the frontend to send subsequent requests. The Angular code snippet is outlined below: get(url: string ...
I'm working on a function that looks like this: export function createTypedArray<T extends TypedArray>( arg : { source : T, arraySize : number } ) : T { if( arg.source instanceof Int32Array ) { return new Int32Array( arg.arraySize ); } ...
Every time I add decorators to my class, they always get called with the arguments specified for legacy decorators: a target, property key, and property descriptor. I am interested in using TypeScript 5.0 decorators. Is this feasible, and if so, how can I ...
Working with my graphQL API using typescript and type-graphql, I am attempting to perform a mutation that has an inputType with an enum value defined as shown below export enum GenderType { female = 'female', male = 'male', } regis ...
const obj: {[key: string]: string} = {foo: 'x', bar: 'y'}; type ObjType = keyof typeof obj; Is there a way to restrict ObjType to only accept values "foo" or "bar" without changing the type of obj? ...
Is it considered incorrect to access the User Id within the ngOnIt() method using this.afAuth.auth.currentUser.uid;? I am encountering an issue where uid is undefined when I reload the page, although it works correctly after logging in or being redirect ...
Can someone help me with Angular 2/4 syntax for this code snippet? $('nav ul li a').click(() => { $(this).closest('li').addClass('active'); }); ...
After upgrading Angular 7.0 to 8.2.5 in my SSR app, everything seems fine except for the production build. The main issue is that the index.html file is missing in the "./dist/browser" directory. I am running the build using the following command: ng buil ...
Problem: There are untyped objects returned with over 100 different possible keys. I aim to restructure all error objects, regardless of type, into a singular object. const data = [ { "type":"cat", "errors" ...
I need help with displaying data from a list retrieved from a database without having to specify the property names. I want to create reusable Markup for this purpose. Below is my current code snippet: <div class="card card-design" *ngFor="let val of l ...
After installing PrimeNg, I attempted to use the sidebar component in my project. However, upon running the project, an error occurred: ERROR in /home/haddad/projects/node_modules/primeng/components/sidebar/sidebar.d.ts (1,97): Cannot find module '@a ...