尝试发布更新时出现角度未定义变量错误

Question

我正在尝试将我的 ID 变量传递给我的编辑函数，以便我可以将我的更改发布到我的数据库。但是，我收到此错误...

core.js:6210 ERROR TypeError: Cannot read property 'ID' of undefined

到目前为止，我将添加我的编辑方法以供参考。我知道发生这种情况是因为在启动程序时没有设置 ID 值，因为我还没有按下 EDIT。但是，即使在按下编辑之后。我收到同样的错误。

EDIT SERVICE在这里，我创建了我的编辑服务，设置了我的 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 POST

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

        }

Answer 1

在您的模板中，您正在调用您的方法editData(item)，并且您将变量item 作为参数传递。但是在你的模板中没有定义这样的东西——我假设（不看你的代码的其余部分）你想写editData(forecast)。这将传递在您的*ngFor 指令中定义的forecast 变量。

Answer 2

将 editData(item) 编辑为 editData(forecast) 因为您在 *ngFor 中设置的变量是 forecast