Question

我有一个搜索按钮，根据用户选择的选项，将触发相应的API调用。但是我现在有一堆if else语句。

所以我的问题是，我可以重构吗？但是没有开关盒吗？

 searchFor() {
    if (this.selectedSearch === 'Registratie') {
      this.extendedSearchService
        .filerByRegistration(this.selectedValue, this.startDate)
        .subscribe(filterByRegistration => {
          this.filterparticipant.emit(filterByRegistration);
        });
    }

    if (this.selectedSearch === 'Chat') {
      this.extendedSearchService.filterByChat(this.startDate).subscribe(filterByChat => {
        this.filterparticipant.emit(filterByChat);
      });
    }

    if (this.selectedSearch === 'Inlog') {
      console.log('INlog');
      this.extendedSearchService.filterByInlog(this.startDate).subscribe(filterByInlog => {
        this.filterparticipant.emit(filterByInlog);
      });
    }

    if (this.selectedSearch === 'QrCode') {
      this.extendedSearchService
        .filterByQrCodes(this.selectedValue, this.startDate, this.selectedQrcode)
        .subscribe(fitlerByQrCode => {
          this.filterparticipant.emit(fitlerByQrCode);
        });
    }

    if (this.selectedSearch === 'Doelen') {
      this.extendedSearchService
        .filerByChallenge(this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie)
        .subscribe(filterByChallenge => {
          this.filterparticipant.emit(filterByChallenge);
        });
    }

    if (this.selectedSearch === 'Vcheq') {
      this.extendedSearchService
        .filterByVchecCode(this.selectedValue, this.startDate, this.selectedVcheqOption)
        .subscribe(filterByVcheqCode => {
          this.filterparticipant.emit(filterByVcheqCode);
        });
    }
  }

谢谢

我现在这样子：

 searchFor() {
    const filter = (method, params) => {
      this.extendedSearchService[method](...params).subscribe(filter => {
        this.filterparticipant.emit(filter);
      });

      const filters = {
        Registratie: filter('Registratie', [this.selectedValue, this.startDate]),
        Chat: filter('Chat', [this.startDate]),
        Inlog: filter('Inlog', this.startDate),
        QrCode: filter('QrCode', [this.selectedValue, this.startDate, this.selectedQrcode]),
        Doelen: filter('Doelen', [
          this.selectedValue,
          this.startDate,
          this.selectedValueOptie,
          this.selectedValueProgressie
        ]),
        Vcheq: filter('Vcheq', [this.selectedValue, this.startDate, this.selectedVcheqOption])
      };

      if (filters[this.selectedSearch]) {
        filters[this.selectedSearch]();
      }
    };
}

它可以编译，但是过滤器不起作用。

如果我这样做：

 searchFor() {
    const filter = (method, params) => {
      this.extendedSearchService[method](...params).subscribe(filter => {
        console.log('Filter');
        this.filterparticipant.emit(filter);
      });
    };

我收到此错误：

ExtendedSearchComponent.html:90 ERROR TypeError: Cannot read property 'apply' of undefined
    at filter (extended-search.component.ts:211)
    at

在这一行：

 this.extendedSearchService[method](...params).subscribe(filter => {
        console.log('Filter');

我有它：

searchFor() {

      const filter = (method, params) => {
        this.extendedSearchService[method](...params).subscribe(filter => {
          console.log(method);
          this.filterparticipant.emit(filter);
        });
      };

      const filters = {
        Registratie: filter('filterByRegistration', [this.selectedValue, this.startDate]),
        Chat: filter('filterByChat', [this.startDate]),
        Inlog: filter('filterByInlog', [this.startDate]),
        QrCode: filter('filterByQrCodes', [this.selectedValue, this.startDate, this.selectedQrcode]),
        Doelen: filter('filerByChallenge', [this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie]),
        Vcheq: filter('filterByVchecCode', [this.selectedValue, this.startDate, this.selectedVcheqOption]),
     }

      if (filters[this.selectedSearch]) {
        filters[this.selectedSearch]();
      }
    }

然后我得到这个错误：

ExtendedSearchComponent.html:88 ERROR TypeError: Cannot read property 'apply' of undefined
    at filter (extended-search.component.ts:213)
    at ExtendedSearchComponent.push../src/app/participant/components/extended-search/extended-search.component.ts.ExtendedSearchComponent.searchFor (extended-search.component.ts:220)
    at Object.eval [as handleEvent] (ExtendedSearchComponent.html:91)
    at handleEvent (core.js:19628)
    at callWithDebugContext (core.js:20722)
    at Object.debugHandleEvent [as handleEvent] (core.js:20425)
    at dispatchEvent (core.js:17077)
    at core.js:17524
    at HTMLButtonElement.<anonymous> (platform-browser.js:993)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)

好吧，我做了一些调试。

并输入以下内容：

 console.log('Method', method);

但是随后我看到调用了多种方法：

Method filterByRegistration
extended-search.component.ts:214 Method filterByInlog
extended-search.component.ts:214 Method filterByChat

当然不是必须的。一次只调用一个API。

Answer 1

帖子中的最新版本的代码在初始化filter时调用const filters六次。但是，filter仅应在if末尾的searchFor语句中被调用一次。

一种实现此目的的方法是在filters对象中记录方法名称和参数，并修改filter以同时获取方法及其参数。例如：

function searchFor() {

  const filter = (using) => {
    this.extendedSearchService[using.method](...using.params).subscribe(filter => {
      console.log(using.method);
      this.filterparticipant.emit(filter);
    });
  };

  const filters = {
    Registratie: { method: 'filterByRegistration', params: [this.selectedValue, this.startDate]},
    Chat: { method: 'filterByChat', params: [this.startDate]},
    Inlog: { method: 'filterByInlog', params:  [this.startDate]},
    QrCode:{ method: 'filterByQrCodes', params: [this.selectedValue, this.startDate, this.selectedQrcode]},
    Doelen: { method: 'filerByChallenge', params: [this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie]},
    Vcheq: { method: 'filterByVchecCode', params: [this.selectedValue, this.startDate, this.selectedVcheqOption]},
  }

  if (filters[this.selectedSearch]) {
    filter(filters[this.selectedSearch]);
  }
}

Answer 2

您可以创建一个对象，其属性为搜索类型，函数为值。

这是其工作方式的示例

var searchObject = {
  optionA: function(){
    console.log('Option A')
  },
  optionB: function(){
    console.log('Option B')
  }
}

function search(option){
  searchObject[option]()
}

search('optionA')
search('optionB')

这是您的代码的摘要，我没有跟上角度，因此取决于定义的位置，它可能是this.searchObject，但是概念会一样

var searchObject = {
  Registratie: function() {
    this.extendedSearchService
      .filerByRegistration(this.selectedValue, this.startDate)
      .subscribe(filterByRegistration => {
        this.filterparticipant.emit(filterByRegistration);
      });
  },
  Chat: function() {
    this.extendedSearchService.filterByChat(this.startDate).subscribe(filterByChat => {
      this.filterparticipant.emit(filterByChat);
    });
  }
}



searchFor() {
  searchObject[this.selectedSearch]()
}

Answer 3

动态制作，这样可以避免一一检查

const filter = (method, params) => {
  this.extendedSearchService[method](...params).subscribe(filter => {
     this.filterparticipant.emit(filter);
  });
};

const filters = {
   Registratie: filter('filterByRegistration', [this.selectedValue, this.startDate]),
   Chat: filter('filterByChat', [this.startDate]),
   Inlog: filter('filterByInlog', [this.startDate]),
   QrCode: filter('filterByQrCodes', [this.selectedValue, this.startDate, this.selectedQrcode]),
   Doelen: filter('filerByChallenge', [this.selectedValue, this.startDate, this.selectedValueOptie, this.selectedValueProgressie]),
   Vcheq: filter('filterByVchecCode', [this.selectedValue, this.startDate, this.selectedVcheqOption]),
}

if(filters[this.selectedSearch]) {
   filters[this.selectedSearch]();
}

如果API调用的其他语句如何重构？

3 个答案: