How to push a item to an Angular List? [duplicate] - arrays

Question

This question already has answers here:
Arrow Functions and This [duplicate]
(5 answers)
Closed 4 years ago.
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

Answer 1

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");
}
});
}

Answer 2

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");
}
});
}