Блог

Я пытаюсь передать свою переменную идентификатора в функцию редактирования, чтобы я мог опубликовать свои изменения в своей базе данных. Однако я получаю эту ошибку…

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

        }
 

В своем шаблоне вы вызываете свой метод editData(item) и передаете переменную item в качестве параметра. Но в вашем шаблоне такая вещь не определена — я предполагаю (не глядя на остальную часть вашего кода), что вы хотели написать editData(forecast) вместо этого. Это передаст forecast переменную, определенную в вашей *ngFor директиве.

Измените editData(элемент) на editData(прогноз), поскольку вы задали переменную в *ngFor — это прогноз