#c# #html #asp.net #angular #post
Вопрос:
Я пытаюсь передать свою переменную идентификатора в функцию редактирования, чтобы я мог опубликовать свои изменения в своей базе данных. Однако я получаю эту ошибку…
core.js:6210 ERROR TypeError: Cannot read property 'ID' of undefined
Я добавлю свой метод редактирования для справки до сих пор. Я понимаю, что это происходит потому, что при запуске программы не задано значение ID, потому что я еще не нажал «РЕДАКТИРОВАТЬ». Однако даже после нажатия кнопки изменить. Я получаю ту же ошибку.
СЛУЖБА РЕДАКТИРОВАНИЯ Здесь я создаю свою службу редактирования, настраиваю свою инструкцию post и передаю переменную ID.
editWeatherList(val: any) {
return this.http.post(this.baseURL '/?ID = ', val)
}
ОТРЕДАКТИРУЙТЕ ФАЙЛ TS Затем я настрою свои переменные в массиве, который будет передан в мою службу editWeatherList после нажатия кнопки.
editData(item) {
var val = { ID: item.ID, Date: item.Date, TemperatureC: item.TemperatureC, TemperatureF: item.TemperatureF, Summary: item.Summary };
this.service.editWeatherList(val).subscribe(res => {
alert(res.toString());
});
РЕДАКТИРОВАТЬ HTML-ФАЙЛ
table class='table table-striped' aria-labelledby="tableLabel">
<thead>
<tr>
<th>
<button [routerLinkActive]="['link-active']" [routerLink]="['/weatherpage']">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="20" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
</button>
<button (click)="refreshWeatherList()" style="margin:5px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" />
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" />
</svg>
</button>
</th>
<th>ID</th>
<th>Date</th>
<th>Temp. (C)</th>
<th>Temp. (F)</th>
<th>Summary</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let forecast of forecasts">
<td>
<button type="submit" button (click)="showDiv.element = !showDiv.element; editData(item) ">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
<path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z" />
</svg>
</button>
<button type="submit" (click)="deleteData(forecast)" style="margin:5px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
</svg>
</button>
</td>
<td>{{forecast.ID}}</td>
<td>{{ forecast.Date }}</td>
<td>{{ forecast.TemperatureC }}</td>
<td>{{ forecast.TemperatureF }}</td>
<td>{{ forecast.Summary }}</td>
</tr>
</tbody>
</table>
<div *ngIf="showDiv.element; ID">
<form [formGroup]="weatherForm" (ngSubmit)="onSubmit()" novalidate>
<div class="form-group">
<label for="inputDate">Date</label>
<input type="text" class="form-control" id="inputDate" formControlName="Date" [(ngModel)]="Date">
</div>
<div class="form-group">
<label for="inputTemp">Temperature C</label>
<input type="text" class="form-control" id="inputTemp" formControlName="TemperatureC" [(ngModel)]="TemperatureC">
</div>
<div class="form-group">
<label for="inputTemp2">Temperature F</label>
<input type="text" class="form-control" id="inputTemp2" formControlName="TemperatureF" [(ngModel)]="TemperatureF">
</div>
<div class="form-group">
<label for="inputSummary">Summary</label>
<input type="text" class="form-control" id="inputSummary" formControlName="Summary" [(ngModel)]="Summary">
</div>
<button type="submit" class="btn btn-primary" (click)="editData()">Save Changes</button>
</form>
</div>
HTTP-СООБЩЕНИЕ
[HttpPost]
public JsonResult Post(int date, int temperatureC, int temperatureF, string summary)
{
string query = @"INSERT INTO dbo.WeatherForecast(Date, TemperatureC, TemperatureF, Summary) VALUES(@Date, @TemperatureC, @TemperatureF, @Summary)";
DataTable table = new DataTable();
string sqlDataSource = _configuration.GetConnectionString("WeatherAppCon");
SqlDataReader myReader;
using (SqlConnection myCon = new SqlConnection(sqlDataSource))
{
myCon.Open();
using (System.Data.SqlClient.SqlCommand myCommand = new SqlCommand(query, myCon))
{
myCommand.Parameters.AddWithValue("@Date", date);
myCommand.Parameters.AddWithValue("@TemperatureC", temperatureC);
myCommand.Parameters.AddWithValue("@TemperatureF", temperatureF);
myCommand.Parameters.AddWithValue("@Summary", summary);
myReader = myCommand.ExecuteReader();
table.Load(myReader);
myReader.Close();
myCon.Close();
}
}
return new JsonResult("Success");
}
Ответ №1:
В своем шаблоне вы вызываете свой метод editData(item)
и передаете переменную item
в качестве параметра. Но в вашем шаблоне такая вещь не определена — я предполагаю (не глядя на остальную часть вашего кода), что вы хотели написать editData(forecast)
вместо этого. Это передаст forecast
переменную, определенную в вашей *ngFor
директиве.
Комментарии:
1. Это исправило эту проблему. Однако сейчас я испытываю эту ошибку в своем методе контроллера API для своего ПОСТА. «Параметризованный запрос» (@Date int,@TemperatureC int,@TemperatureF int,@Summary nvarchar» ожидает параметр «@Summary», который не был предоставлен.» Я думаю, это потому, что я неправильно передаю параметры? То, как настроен мой ПОСТ, по умолчанию значение идентификатора будет равно НУЛЮ, что создаст новый слот для моих переменных, которые будут помещены в таблицу. Однако, поскольку мой ПОСТ не содержит значения и идентификатора, я не думаю, что он знает, что с ним делать? Я включу свой ПОСТ выше.
2. Ваша конечная точка ожидает четыре параметра, и вы передаете ей пять.
Ответ №2:
Измените editData(элемент) на editData(прогноз), поскольку вы задали переменную в *ngFor — это прогноз