Issues with capturing object values in Typescript with Angular click event

Encountering an issue with binding values when passing Event parameters from the Template to Typescript Button click event.

https://i.sstatic.net/SEnL6.png


Take a look at the object below, it is properly binding but not reflecting the same in the Typescript controller.

Check out this value.. https://i.sstatic.net/huyJj.png

What could be the reason for this?

Snippet of Code: Get Order template

<table class="table table-bordered">
    <tr>
        <td>ID  </td>
        <td>Name</td>
        <td>Price</td>
        <td>Action</td>
    </tr>
    <tr ng-repeat="order in vm.addNewOrderData track by $index">
        <td><label>{{order.orderID}}</label>  </td>
        <td><label>{{order.orderName}}</label> </td>
        <td><label>{{order.orderPrice}}</label> </td>
        <td><label> <a href="javascript:void(0);" ng-model="editobj" ng-click="vm.edit('{{order.orderID}}');">Edit</a></label> </td>
    </tr>
</table>


Below is GetOrderController.ts

class GetOrderController {
    public vm: any;
    private scope: any;
    public addNewOrderData: any;
    public http: any;
    public location: any;
    constructor($http: any, $scope: any, $location:any) {
        this.scope = $scope;
        this.scope.vm = this;
        this.http = $http;
        this.location = $location;
        $http.get("/api/SampleApi/GetAllOrder").success(
            (data, status) => {
                if (data != "null") {
                    this.addNewOrderData = data;
                }
            }).error((data, status) => {
            this.addNewOrderData = data;
        });
    }

    edit = (id: any): void => {
        debugger;
        var order = { OrderID: id };
        this.http.get("/api/SampleApi/GetOrderById",id
            ).success(
            (data, status) => {
                if (data != "null") {
                    this.location.path('/saveOrder?id=' + order);
                }
                else {
                    alert("No order id found!");
                }

            }).error((data, status) => {

        });
    }
}

Answer №1

ng-click should not contain {{}} (interpolation), pass the direct expression for evaluation.

Replace

ng-click="vm.edit('{{order.orderID}}');"

with

ng-click="vm.edit(order.orderID);"

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

Separating buttons (two buttons switching on and off simultaneously) and displaying the corresponding button based on the data

My current project involves creating a registration page for specific courses. While I am able to display the information correctly, I am facing an issue with the ng-repeat function. The problem lies in all the Register buttons toggling incorrectly. Additi ...

ng-bind-html is having trouble parsing the HTML correctly and binding it

Here is the code for my controller: myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) { $scope.table="<p>OOPSY</p>"; $sc ...

AngularJS Circular Dependency - Metamorphosis

Seeking advice on dealing with nested resources in an API. I am creating "transformers" to format data for better usability. However, I am facing a circular dependency issue due to the nature of nested resources and bidirectional relationships. For examp ...

What is the most effective way for server.js to send a request to a controller?

When I need to send data from a controller to my main server.js, I typically use the following method: $http.post('/auth/signup', user); This code is executed in the controller: app.post('/auth/signup', function(req, res, next) The ...

Encountered an HttpErrorResponse while trying to access the API endpoint

I am encountering an issue when trying to update and insert data with a single post request. https://i.sstatic.net/T9UKR.png Below is my API code: https://i.sstatic.net/kkwqs.png Here is the service code: https://i.sstatic.net/IUMSd.png This section ...

How can we exclude fields from JSON.stringify in type-graphql entities?

Utilizing https://github.com/MichalLytek/type-graphql for crafting our graphql schema has posed a challenge. When we serialize the TypeScript entity object, it does not adhere to the field annotations in our GQL entities, resulting in unwanted data leakage ...

Issues with implementing the link component in next.js

I've been working on a blog using next.js and I'm having trouble with the header links not working. I followed the next.js documentation to create the links, but whenever I reload the website and try to click the links, my console shows: "GET 40 ...

Leveraging the power of TypeScript and Firebase with async/await for executing multiple

Currently, I am reading through user records in a file line by line. Each line represents a user record that I create if it doesn't already exist. It's possible for the same user record to be spread across multiple lines, so when I detect that it ...

angular ensuring seamless synchronization of objects across the application

This question pertains to both angular and javascript. In our angular app, we have numerous objects from the backend that need to remain synchronized. I am facing challenges in establishing efficient data bindings to ensure this synchronization throughout ...

JSON parsing error: an unexpected token was encountered

I have recently validated the JSON string response on this JSON formatter tool and it confirms that the JSON string is valid. Below is the function I utilized to serialize data into a JSON string: private string getJSONData() { obj_userSession = new ...

Tips for displaying bar chart labels effectively with ChartJS

I am working on an Angular project and I would like to incorporate a barchart using ChartJS. The data for this chart can vary in size, sometimes being very large. One issue I have encountered is that when the number of data points is large, the labels ove ...

A guide to dynamically adjusting the overflow property for the body element within an AngularJS application

I am facing a challenge in my AngularJS application where I need to dynamically control the overflow on the body element. Specifically, when a side nav is opened, I want to disable scrolling on the body. Below is a snippet of my code and I would appreciate ...

Ways to manually update a counter while using ng-repeat and ng-if in AngularJS

Presently, I am using the following typical loop structure <div ng-repeat= <li ng-if= --> {{$index}} </br> However, using $index does not quite meet my requirements as it outputs --> 1 --> 2 --> 5 --> 9 ... What I ...

tips for sending types as properties in a versatile component

I am facing a challenge with passing types as props to a reusable component. I have a component where I pass rows and headings as props, but I need to find a way to pass types as props as well. Below is the code for my reusable component: import { TableCe ...

The address :::3000 is already in use by NestJS

While attempting to deploy my NestJs server on a C-Panel hosting, I have encountered an issue. Despite properly installing all node_modules and ensuring every project file is in place, the server fails to start and continuously displays the following error ...

Incorporating DefinitelyTyped files into an Angular 2 project: A step-by-step guide

I am currently developing an application using angular 2 and node.js. My current task involves installing typings for the project. In the past, when starting the server and activating the TypeScript compiler, I would encounter a log with various errors rel ...

Exploring ways to interact with an API using arrays through interfaces in Angular CLI

I am currently utilizing Angular 7 and I have a REST API that provides the following data: {"Plate":"MIN123","Certifications":[{"File":"KIO","Date":"12-02-2018","Number":1},{"File":"KIO","Date":"12-02-2018","Number":1},{"File":"preventive","StartDate":"06 ...

The struggle of accessing child components using ViewChild in Angular

I am facing an issue with a dialog box that is supposed to display a child component separately. Below is the code for the child component: @Component({ selector: 'userEdit', templateUrl: './edituser.component.html', styleUrls: [ ...

Setting the default date in angular-bootstrap-datetimepicker: a step-by-step guide

I am currently utilizing the angular-bootstrap-datetimepicker module for allowing users to choose a date and time. How can I set a default date and time when the view initially renders? Is there an attribute available that allows us to assign a boolean val ...

Ways to incorporate conditional checks prior to running class methods

Seeking input on handling async data retrieval elegantly. When initializing a class with asynchronous data, I have been following this approach: class SomeClass { // Disabling strictPropertyInitialization private someProperty: SomeType public asy ...