Angular ASP.NET SQL：将表变量值发送到另一个组件

编程问答 2022-04-23

问题描述

我通过从我的 sql 数据库中获取表信息创建了一个 angular 表。我正在创建一个编辑按钮，用我输入的内容更新表值。目前我拥有它，因此用户可以在更新的表单中输入 ID。但是，我希望能够将 ID 传递给表单，而不是允许用户输入它。

这是我目前所拥有的。

表格 HTML 按钮编辑将 ID 值传递给查询字符串，并将其发送到编辑页面，同时将用户重定向到编辑页面。在此之后，我不确定如何将查询字符串中的值获取到编辑组件 ts 文件中。

 <tbody>
    <tr *ngFor="let forecast of forecasts">
      <td>
        <button [routerLinkActive]="['link-active']" routerLink="/editweatherforecast/{{forecast.ID}}"> //This is to redirect to editing
          <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>

编辑表单 TS 文件 这里我创建了一个天气表单并声明了我拥有的 5 个变量。目前，我已将每个变量设置为接收输入数据，但我需要 ID 仅等于从上一页提取的值，这是我卡住的地方。

export class EditWeatherForecastComponent implements OnInit {
  title = 'Edit Data';
  baseUrl: string;
  ID: number;
  weatherForm: FormGroup;

  constructor(private service: ApiService,@Inject('BASE_URL') baseUrl: string,private formBuilder: FormBuilder,public http: HttpClient,private router: ActivatedRoute) {
    this.baseUrl = "https://localhost:44347/WeatherForecast";
    this.weatherForm = formBuilder.group({
      ID: this.forecast.ID,Date: new FormControl(),TemperatureC: new FormControl(),TemperatureF: new FormControl(),Summary: new FormControl(),});
  }

  forecasts: any = [];

  ngOnInit(): void {
    this.refreshWeatherList();
    this.ID = +this.router.snapshot.paramMap.get('ID');

    this.service.getWeatherListID(this.ID).subscribe((response: WeatherForecast) => {
    this.forecast = response;
    });
  }

  refreshWeatherList() {
    this.service.getForecast().subscribe(data => {
      this.forecasts = data;
    });
  }

  updateWeatherList() {
    const params = new HttpParams({
      fromObject: {
        'ID': this.weatherForm.value.ID.toString(),'date': this.weatherForm.value.Date.toString(),'temperatureC': this.weatherForm.value.TemperatureC.toString(),'temperatureF': this.weatherForm.value.TemperatureF.toString(),'summary': this.weatherForm.value.Summary.toString()
      }
    });

    console.log(params);
    this.http.put(this.baseUrl,{},{ params: params }).subscribe(data => {
      this.refreshWeatherList();
      console.log(data);

    });
  }

}

编辑 HTML 包含编辑表单的 HTML 以显示我目前如何以用户方式接收数据，理想情况下我们希望在此处省略 ID 输入框，因为我希望 ID无法由用户决定

<h1>{{title}}</h1>

<div class="container mt-5">
  <form [formGroup]="weatherForm" (ngSubmit)="onSubmit(f)" #f="ngForm" >
    <div class="form-group">
      <label for="">ID</label>
      <input type="text" class="form-control" [ngModel]="forecast.ID" name="ID" formControlName="ID"/>
    </div>
    <div class="form-group">
      <label for="">Date</label>
      <input type="text" class="form-control" [ngModel]="forecast.Date" name="Date" formControlName="Date"/>
    </div>
    <div class="form-group">
      <label for="">TemperatureC</label>
      <input type="text" class="form-control" [ngModel]="forecast.TemperatureC" name="TemperatureC" formControlName="TemperatureC"/>
    </div>
    <div class="form-group">
      <label for="">TemperatureF</label>
      <input type="text" class="form-control" [ngModel]="forecast.TemperatureF" name="TemperatureF" formControlName="TemperatureF"/>
    </div>
    <div class="form-group">
      <label for="">Summary</label>
      <input type="text" class="form-control" [ngModel]="forecast.Summary" name="Summary" formControlName="Summary"/>
    </div>
    <div class="form-group">
      <button type="submit" (click)="updateWeatherList()" >Save</button>
    </div>
  </form>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularasp.netc#c#getput