在 Angular 中编辑表中的数据时更改其他地方的数据

Question

我有一个数据表、图表和最新值标签。

• 表格和图表显示时间序列数据，包括：最近30分钟的时间值及其从0到999的随机数值。
• 每 10 秒新对象被推入数组并删除最旧的对象，因此始终只显示最后 30 分钟。
• Latestvalue标签显示的是最新增加的价值。

我正在尝试弄清楚如何实现对表格中行的编辑，因此当我编辑任何行的时间或其随机值或两者时，我还想在图表中显示更改。

我怎样才能做到这一点？任何帮助表示赞赏

这是我的主要 ts 和 HTML :

export class MainComponent implements OnInit {
  data: IData[] = [];
  latest: IData = { time: 0, value: 0 };

  constructor(private dataService: DataService) {}

  ngOnInit(): void {
    this.getData();
  }

  getData() {
    this.dataService.getData().subscribe((data) => {
      this.data = data;
    });
  }

  getLatestValue() {
    this.dataService.stream().subscribe((latest) => {
      this.latest = latest;
    });
  }

主 HTML

<div class="row">
  <app-table [tableData]="data"></app-table>
  <div class="column">
    <app-label
      [latestTime]="latest.time"
      [latestValue]="latest.value"
    ></app-label>
    <app-chart [chartData]="data"></app-chart>
  </div>
</div>

桌子

export class TableComponent {
  @Input() tableData: IData[] = [];

  editRow(data: IData) {
    console.log(data);
  }

  initRow(data: IData) {}
}

表格 html

<div class="container">
  <p-table
    [value]="tableData"
    dataKey="time"
    editMode="row"
    scrollHeight="flex"
    styleClass="p-datatable-gridlines"
    [rows]="8"
    [scrollable]="true"
  >
    <ng-template pTemplate="header">
      <tr>
        <th class="time">Time</th>
        <th class="value">Value</th>
        <th class="action"></th>
      </tr>
    </ng-template>
    <ng-template
      pTemplate="body"
      let-data
      let-editing="editing"
      let-ri="rowIndex"
    >
      <tr [pEditableRow]="data">
        <td class="p-column-title">
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input pInputText type="text" [(ngModel)]="data.time" />
            </ng-template>
            <ng-template pTemplate="output">
              {{ data.time | date : "yyyy-MM-dd HH:mm:ss" }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <input pInputText type="text" [(ngModel)]="data.value" />
            </ng-template>
            <ng-template pTemplate="output">
              {{ data.value | number : "1.2-2" }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td class="action-button">
          <div class="flex align-items-center justify-content-center gap-2">
            <button
              *ngIf="!editing"
              pButton
              pRipple
              type="button"
              (click)="initRow(data)"
              pInitEditableRow
              icon="pi pi-pencil"
              class="p-button-rounded p-button-text"
            ></button>
            <button
              *ngIf="editing"
              pButton
              pRipple
              (click)="editRow(data)"
              type="button"
              pSaveEditableRow
              icon="pi pi-check"
              class="p-button-rounded p-button-text p-button-success mr-2"
            ></button>
            <button
              *ngIf="editing"
              pButton
              pRipple
              type="button"
              pCancelEditableRow
              icon="pi pi-times"
              class="p-button-rounded p-button-text p-button-danger"
            ></button>
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>

图表 ts

export class ChartComponent implements OnInit {
  @Input() chartData: IData[] = [];
  data: any;

  constructor(private datePipe: DatePipe) {}

  ngOnInit(): void {
    this.initChart();
  }

  initChart() {
    const times = this.chartData.map((item) =>
      this.datePipe.transform(item.time, "yyyy-MM-dd HH:mm:ss")
    );
    const values = this.chartData.map((item) => item.value.toFixed(2));

    this.data = {
      labels: times,
      datasets: [
        {
          label: "First Dataset",
          data: values,
          fill: false,
          borderColor: "",
          tension: 0.4,
        },
      ],
    };
  }
}

图表 html

  <p-chart width="60vw" type="line" height="72vh" [data]="data"></p-chart>

数据服务

const delta = 10000;

function getValue(): number {
  return Math.random() * 1000;
}

function getTime(index: number) {
  return Date.now() - index * delta;
}

@Injectable({
  providedIn: "root",
})
export class DataService {
  private data: IData[] = [];
  private lastValueData: Subject<IData>;

  constructor() {
    this.lastValueData = new Subject();

    for (let i = 179; i >= 0; i--) {
      this.data.push({
        time: getTime(i),
        value: getValue(),
      });
    }

    setInterval(() => {
      const value = {
        time: Date.now(),
        value: getValue(),
      };

      this.data.shift();
      this.data.push(value);
      this.lastValueData.next(value);
    }, delta);
  }

  public stream(): Observable<IData> {
    return this.lastValueData.asObservable();
  }

  public getData(): Observable<IData[]> {
    return new Observable((subscriber) => {
      subscriber.next(this.data);
      subscriber.complete();
    });
  }
  changeData(data: IData) {
    this.lastValueData.next(data);
  }
}

界面

export interface IData {
  time: number;
  value: number;
}

Answer 1

所以，不直接评论你的代码（太长，没看完）， 但是直接回答你的问题，我发现像这样的问题最好的答案是认识到你的用户界面就是这样——它不是数据存储。

因此，将您的数据保存在一个地方，这完全不依赖于 UI 的任何部分。

然后，使该数据可用于需要与之交互的任何 UI 部分，例如，通过服务提供它，并将该服务注入任何需要它的组件，例如，显示它或编辑它。