如何解决Angular ASP.NET SQL:将表变量值发送到另一个组件
我通过从我的 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 举报,一经查实,本站将立刻删除。