Angular / put响应式表单

Question

我想在模态中编辑我的数据，用put方法我使用响应式表单。首先，我如何基于项目的id打开模式?

service.ts

public editCampaign(id){
return this.http.put(this.API_SERVER + '/Campaign', id);
}

campaigns.html

<tr *ngFor="let item of campaigns">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.createdAt | date }}</td>
<td>{{item.status}}</td>
<td class="icons">
<button (click)="openEditDialog()">
<mat-icon>edit</mat-icon>
</button>
<button (click)="openDeleteDialog()">
<mat-icon>delete</mat-icon>
</button>
</td>
</tr>

campaigns.ts

ngOnInit(): void {
this.campaignService.sendGetRequest()
.subscribe((data: any[])=>{
console.log(data);
this.campaigns = data;
})
}

openEditDialog() {
const dialogRef = this.dialog.open(EditComponent);
}

第二，如何根据item的id显示数据?

edit.component.html

<form [formGroup]="editForm" class="is-half" (ngSubmit)="onSubmit()">
<div class="field">
<label class="label">Name</label>
<div class="control">
<input class="input"
type="text"
formControlName="Name"
>
</div>
</div>
<div class="field">
<label class="label">Description</label>
<div class="control">
<textarea class="textarea"
formControlName="SmsText"
></textarea>
</div>
</div>
<button mat-button class="primary">Submit</button>
</form>

edit.component.ts

ngOnInit(): void {
this.editForm = this.fb.group({
Name: [''],
SmsText: ['',  [Validators.required]],
});
onSubmit() {
}

Answer 1

我猜你正在使用角材质对话框?在这种情况下，请阅读文档，特别是关于在父级和对话框之间共享数据的部分。

如果你想与你的对话框共享数据，你可以使用data选项来传递对话框组件的信息。

let dialogRef = dialog.open(YourDialog, {
data: { name: 'austin' },
});

要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注射标记:

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material/dialog';
@Component({
selector: 'your-dialog',
template: 'passed in {{ data.name }}',
})
export class YourDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: {name: string}) { }
}

在你的情况下，你有两个选项:

1. 传入项目id并从服务器获取数据
2. 传递整个项目，只使用已经存在的数据