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

其次，如何根据商品的 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

我猜您正在使用 Angular Material 对话框？在这种情况下，请阅读 documentation，尤其是有关在父级和对话框之间共享数据的部分。

<块引用>

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

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}) { }
}

在您的情况下，您有两个选择：

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

角度/放置反应形式

1 个答案: