2

我有一个奇怪的问题。

在我的组件 CategoryComponent 中，我在 escope 中有一个变量，即：

@Input() 类别：类别模型；

当我使用服务发布一个简单的帖子并返回一个数据时，我会更改此变量以进行更改，因此我创建了一个执行此操作的函数：

if (category.uploading) {
  this.checkMedia(this.category, this.module);
}

在我的函数中，我这样做：

checkMedia(model: any, module: String) {
    let counter = 0;
    var refreshIntervalId = setInterval(() => {
      const service =
        model instanceof CategoryModel
          ? this.categoryService
          : this.foodService;
      service
        .hasMedia(model)
        .pipe(
          switchMap((hasMedia) => {
            if (hasMedia) {
              return service.show(model, module);
            }
            return of(undefined);
          }),
          catchError((_) => {
            clearInterval(refreshIntervalId);
            return of(undefined);
          })
        )
        .subscribe(
          (newModel) => {
            if (newModel) {
              if(newModel.hasMedia) {
                model.hasMedia = newModel.hasMedia;
                model.images = newModel.images;
                model.uploading = false;
                console.log(model);
                console.log(this.category);
                clearInterval(refreshIntervalId);
                this.cd.detectChanges();
              }
            }
          },
          (_) => {
            clearInterval(refreshIntervalId);
          }
        );
      counter++;
      if (counter == 3) {
        if (refreshIntervalId) {
          model.uploading = false;
          clearInterval(refreshIntervalId);
          this.cd.detectChanges();
        }
      }
    }, 8000);
  }

为什么在这部分：

        model.hasMedia = newModel.hasMedia;
        model.images = newModel.images;
        model.uploading = false;
        console.log(model);
        console.log(this.category);
        clearInterval(refreshIntervalId);
        this.cd.detectChanges();

仅当我直接引用此变量时，我的屏幕才会更改，例如this.category.name = "TESTE"; ，例如，但是当我使用参数model:any时，当我在 console.log() 中看到它时，它会更改全局变量，但在我的首页中，我想要的状态没有改变，为什么？

4

1 回答 1

1

主要问题

我有点不明白，你用模型做什么？你为什么不使用this.model？我希望您会在 HTML 中的某个地方引用模型，因此需要更新类成员变量this.model = {blah-blah-blah}。你在课堂上的某个地方声明了一个公共财产模型吗？为什么不更新？在您的班级中，您需要声明：

@Input() category: CategoryModel;
model: any;

然后在您的代码中：

this.model = something

然后在你的 html 中：

{{ model | json }}

其他潜在问题

您使用什么变化检测策略？OnPush 还是默认？除非您对它有信心，否则不应使用 OnPush。可能因为您正在变异模型更改检测没有起作用。您应该避免对象变异。要解决此问题，请尝试添加此行：

model.hasMedia = newModel.hasMedia;
model.images = newModel.images;
model.uploading = false;
model = {...model}; // creates a new object reference which will cause Angular change detection to kick in

或者

import {cloneDeep} from 'lodash-es';

model.hasMedia = newModel.hasMedia;
model.images = newModel.images;
model.uploading = false;
model = cloneDeep(model); // creates a new object reference which will cause Angular change detection to kick in

我发现第二种方法更具可读性。让我知道它是否有效。祝一切顺利。

这是突变（坏）：

model.hasMedia = newModel.hasMedia;
model.images = newModel.images;
model.uploading = false;

这不是突变（好）：

model = {
  ...model
  hasMedia: newModel.hasMedia;
  images: newModel.images;
  uploading: false;
}

编辑...使用返回值

this.checkMedia(this.category, this.module).then((cat) => {
  this.category = cat;
});

并返回一个值checkMedia

checkMedia(model: any, module: String): Promise<any> {
  return new Promise((resolve) => {
    // your existing code
    resolve(model)
  })
}
于 2021-09-17T23:46:53.530 回答