How to push a item to an Angular List?

Question

first of all thank you for taking the time to read this and possibly to help me.

I created a list and I want to add a item to it that I am getting from a AJAX call to an MVC Controller

Typescript:

export class FunctionalityComponent {
  public items = [{ Name: "Name", Nachname: "Nachname" },
    { Name: "Name", Nachname: "Nachname" },
    { Name: "Name", Nachname: "Nachname" }];
  }

  addRowMVC() {
    $.ajax({
      url: '/Functionality/AddRow',
      type: 'post',
      success: function (data) {
        this.items.push({Name: data.name, Nachname: data.nachname});
      },
      error: function () {
        alert("error");
      }
  });
}

MVC-Controller:

class Normal
{
    public string Name;
    public string Nachname;

    public Normal(string name, string nachname)
    {
        Name = name;
        Nachname = nachname;
    }
}

public JsonResult AddRow()
{
    var a = new Normal("aa", "bb" );
    return Json(a);
}

View:

<button (click)="addRowMVC()" class="btn btn-success">Add Row via MVC</button>

<table>
  <thead>
    <tr>
      <th *ngFor="let head of items[0] | keys">{{head}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td *ngFor="let list of item | keys">{{item[list]}}</td>
    </tr>
  </tbody>
</table>

This is probably a bad attempt to get it to work and that's why I'm asking for your guys help. If I try my code it gives me the error that this.items is undefined.

Hope you guys can help me.

Greetings Nico aka. Myridor

Another silly question; Why are you using jQuery ajax while you are using Angular? There is existing functionallity for that in Angular. You should better not mix jQuery with Angular. — Silvermind, Dec 20 '18 at 09:52
Short answer: `this` does not refer to your component. See here why: https://stackoverflow.com/questions/28798330/arrow-functions-and-this?noredirect=1&lq=1 — bugs, Dec 20 '18 at 09:57

score 0 · Answer 1 · answered Dec 20 '18 at 10:39

Try this solution:

export class FunctionalityComponent {
    public items = [{ Name: "Name", Nachname: "Nachname" },
      { Name: "Name", Nachname: "Nachname" },
      { Name: "Name", Nachname: "Nachname" }];
    }

    addRowMVC() {
      let that = this;

      $.ajax({
        url: '/Functionality/AddRow',
        type: 'post',
        success: function (data) {
            that.items.push({Name: data.name, Nachname: data.nachname});
        },
        error: function () {
          alert("error");
        }
    });
  }

Yes thank you so much it worked! :) – Myridor Dec 20 '18 at 11:57 — Myridor, Dec 20 '18 at 11:57

score 0 · Accepted Answer · answered Dec 20 '18 at 10:59

Try this solution

export class FunctionalityComponent {
  public items = [{ Name: "Name", Nachname: "Nachname" },
    { Name: "Name", Nachname: "Nachname" },
    { Name: "Name", Nachname: "Nachname" }];
  }

  addRowMVC() {
  let state = this;
    $.ajax({
      url: '/Functionality/AddRow',
      type: 'post',
      success: function (data) {
        state.items.push({Name: data.name, Nachname: data.nachname});
      },
      error: function () {
        alert("error");
      }
  });
}

Yes thank you so much it worked! :) – Myridor Dec 20 '18 at 11:56 — Myridor, Dec 20 '18 at 11:56

How to push a item to an Angular List?

2 Answers2