Question

我首先要创建一个对象的实例

    export interface IContent {
      type: string;
      name: string;
      color?: string;
      text?: Array<string>;
      xStream?: IValueStream;
      svgType?: string;
      placement?: boolean;
    }

    export interface ITablist {
      id: string;
      text: string;
      content: Array<IContent>;
    }

class something {
tabList: Array<ITablist> = [
        {
      id: 'large_marker',
      text: 'Markers',
      content: [
        { type: 'large_marker', name: 'R', text: ['X:', 'Y:'], svgType: 'r' },
        { type: 'large_marker', name: '1', text: ['X:', 'Y:'], svgType: '1' },
        { type: 'large_marker', name: '2', text: ['X:', 'Y:'], svgType: '2' }
      ]
    }
}

现在，在发生一些点击事件之后，我想向现有的xStream添加属性tablist

fillMarkerXData(xData: Array<IValueStream>, xDataDiff: Array<IValueStream>): void {
    if (xData) {
      this.tabList[0].content[0].xStream = xData[0];
      this.tabList[0].content[1].xStream =
        this.placement1 ? xDataDiff[1] : xData[1];
      this.tabList[0].content[2].xStream =
        this.placement2 ? xDataDiff[2] : xData[2];
    }
  }

但这不会将其绑定到子组件的@input属性

.html

  <div *ngFor="let length of tabList[0].content; let i = index;">
        <marker [valueStream]="tabList[0].content[i].xStream"></marker>
    </div>

在单击事件之后，xstream在子组件中未更新。有人知道我怎么能做到这一点提前感谢

Answer 1

这应该解决它：

在HTML中，您使用tabList[0]遍历*ngFor，但是在click事件处理程序中，您正在tabList[1]中更改值

我的最初答案：

您可以尝试使用lodash cloneDeep：

https://lodash.com/docs/4.17.10#cloneDeep

我认为在对象引用未更改的地方可能未检测到更改。 lodash cloneDeep将确保创建对象的克隆，从而更改对象引用，从而强制进行更改检测：

fillMarkerXData(xData: Array<IValueStream>, xDataDiff: Array<IValueStream>): void {
  if (xData) {
    this.tabList[1].content[0].xStream = cloneDeep(xData[0]);
    this.tabList[1].content[1].xStream =
      cloneDeep(this.placement1 ? xDataDiff[1] : xData[1]);
    this.tabList[1].content[2].xStream =
      cloneDeep(this.placement2 ? xDataDiff[2] : xData[2]);
  }
}

在现有对象中添加新的可选属性不会将此新属性绑定到组件的@input属性

1 个答案: