Extracting Information from a Table in Angular 7

Hi there, I'm new to this forum so if I break any rules, please let me know!

I'm working with the code below in my app.component.html:

<tr *ngFor="let item of items" (click)="getClient($event)">
    <td> {{ item.nr }} </td>
    <td> {{ item.content }} </td>
</tr>

In my app.component.ts, I am fetching data from an API:

export class AuftragslisteComponent implements OnInit {

    constructor(public http: HttpClient) { }

    getItem() {
        return this.http.get("http://localhost:59643/api/lösa");
    }

    items: Object;
    ngOnInit() {
        this.getItem().subscribe(data => {
            this.items = data;
            console.log(this.items);
            console.log(data);
        })
    }

    getClient() {
    }
}

I'm trying to access the item.nr by clicking a row, but the value always comes up as undefined when using the alert function in the getClient method, so I removed it.

Does anyone have any tips on how to correctly access the item.nr by clicking a row?

Answer №1

Modify

<tr *ngFor="let item of items" (click)="getClient($event)">

transform into

<tr *ngFor="let item of items" (click)="getClient(item.nr)">

Next, update your function with the following:

 getClient(nr){
      alert(nr)
   }

Answer №2

Send the object as an argument when calling the function

(click)="getClient(item)

Then retrieve and utilize it within the function

getClient(item){
 console.log(item.nr)
}

Answer №3

snippet

(click)="selectClient(item.nr)"

typescript

  selectClient(data){
     console.log(data);
   }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Effective Management of Uploaded Files

I am currently working on an Angular2 application that interacts with a .NET WebApi to generate text files. Once these files are created, the goal is for users to be able to download them from the application. I am seeking guidance on the best practices ...

Encountered an issue with a module not being found while trying to install a published React component library that is built using Rollup. The error message states:

In my latest project, I have developed a React component library called '@b/b-core' and used Rollup for building and publishing to the repository. When trying to install the library in a React app, an issue arises where it shows Module not found: ...

The error was thrown at line 883 in the cjs/loader.js file of the

I'm encountering an error when trying to run npm start (I've included a screenshot of the error below) in my Angular project. However, everything works fine when I use ng serve. I've attempted multiple solutions to resolve this issue with ...

Adjust the range slider's color depending on its value

I'm looking to customize the color of a range slider as its value increases, switching from red to green. Below is the code I've tried, but it's not quite working as intended. The goal is for the color to change based on the value of masterR ...

Encountering a 403 error while trying to deploy a Node.js application on Heroku

Yesterday, I encountered an issue while trying to access a Node.js application on Heroku. The error message from the Chrome console was: Refused to load the image 'https://browser-rpg-app.herokuapp.com/favicon.ico' due to Content Security Policy ...

An object may be null when its type is A or undefined, but we are certain it is not undefined

Since the release of version 4.8.4, the TypeScript compiler has been flagging an issue with the following code: type A = {v: number} function get_the_first<T>(xs: T[]): T | undefined { if (xs.length > 1) return xs[0]; else ...

Using Angular, Typescript, and ngxs to manage state observables, one may wonder what exactly a variable ending with an exclamation mark (!) signifies. An example of this can be seen in the following code snippet:

Within my TS file, a declaration is present: import { Select } from '@ngxs/store'; @Injectable() export class someService { @Select(someSELECTOR) varName$!: Observable<someType[]>; elements$ = this.varName$.pipe( map(elements => e ...

Error: script took too long to execute, no response received within 11 seconds

During my integration test, I encountered an error message saying Failed: script timeout: result was not received in 11 seconds To investigate further, I navigated to the Chrome browser performance tab and noticed several yellow indicators showing scripti ...

The issue with the text not updating after upgrading to Vue 3 has not been

I am currently in the process of reworking a component for Vue 3, specifically using their new setup script to improve the code readability. This is what the current code looks like: export default { name: "typeWriter", data: () => { ret ...

Achieving dynamic text alignment within a Grid tile container using HTML and Angular

Here is the main section of my parent component. <div class="o-tile-container "> <div *ngFor="let country of Countrys"> <app-country [na ...

Challenges with exporting dynamically generated divs using jspdf in an Angular 2 project

I have been utilizing the jspdf library to print div elements in my current project. But I recently discovered an issue where dynamic content within a div is not being printed correctly. Specifically, when incorporating simple Angular if statements, jspdf ...

Guide to modifying the root directory when deploying a Typescript cloud function from a monorepo using cloud build

Within my monorepo, I have a folder containing Typescript cloud functions that I want to deploy using GCP cloud build. Unfortunately, it appears that cloud build is unable to locate the package.json file within this specific folder. It seems to be expectin ...

Having trouble retrieving information from hash fetch fragment following authentication redirection in Angular 4

Once the authorization process is complete, the browser will be redirected to the following URL: &token_type=bearer&state=XYZ&expires_in=3599 However, just before I can retrieve the details, everything seems to disappear and the browser' ...

Angular2's use of promises, observables, and Dependency Injection (

If I have a service that looks like this import {Injectable} from 'angular2/core'; @Injectable() export class MyService { search(oSrchParams){ let promise = () => new Promise((resolve, reject) => Meteor.call('mockSe ...

Capturing the httpClient response within a service using rxjs

My application has a LoginComponent which includes a form for user credentials, and a LoginService responsible for making API calls using an httpClient. In my services, I usually return the call so that I can subscribe to it within my component as needed. ...

The specified route type does not comply with the NextJS route requirements, resulting in an authentication error

Recently, I have encountered an issue with NextJS routes while working on an ecommerce project. I am seeking guidance to resolve this issue, specifically related to my route.ts file which interacts with NextAuth for providers like Google. During developmen ...

Utilizing session management in Angular while handling CORS origin requests

Everything was going smoothly with my session until I decided to enable CORS. Server: app.use(require('express-session')({ secret: 'some key', resave: true, saveUninitialized: true, proxy: true, cookie: { s ...

Advantages of optimizing NodeJS/TypeScript application by bundling it with webpack

Currently, I am working on a Node/Express application and I am interested in incorporating the most recent technologies. This includes using TypeScript with node/Express along with webpack. I have a question: What advantages come with utilizing webpack t ...

Troubleshooting issue with Material UI icons in React application with Typescript

I created a set of icons based on a github help page like this: const tableIcons = { Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />), DetailPanel: forwardRef((props, ref) => ( <ChevronRight {...props} ref={ref} /> ...

Is it possible to retrieve data from a promise using the `use` hook within a context?

Scenario In my application, I have a component called UserContext which handles the authentication process. This is how the code for UserProvider looks: const UserProvider = ({ children }: { children: React.ReactNode }) => { const [user, setUser] = ...