我们如何为角形的动态表格字段分配字头?

时间:2019-07-15 09:40:52

标签: angular rxjs

我们如何为动态表单字段分配标题?这是stackblitzlink [link]“ https://stackblitz.com/edit/angular-oxkiku

这是我的打字稿代码:

      @ViewChild('languageInstance') languageInstance: NgbTypeahead
      focusLanguage$ = new ReplaySubject<string>()
      clickLanguage$ = new ReplaySubject<string>()


      /** Language */
      searchLanguage = (text$: Observable<string>) => {
        let debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged())
        let clicksWithClosedPopup$ = this.clickLanguage$.pipe(
          filter(() => !this.languageInstance.isPopupOpen())
        )   
        let inputFocus$ = this.focusLanguage$

        return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
          map(term => (term === '' ? this.languages
            : this.languages.filter(
              (lang) => lang.name.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 7)
          )
        )
      }

以上代码适用于单个表单字段。

1 个答案:

答案 0 :(得分:0)

您可以通过几种方式做到这一点,我将重点介绍两种方式。

  1. 在静态属性设置为false的情况下使用ViewChild。这告诉编译器您的模板引用是动态的,然后您必须选择使用 flag 来确定何时设置和订阅依赖于此元素的observable。
  2. 您可以执行的另一种方法是使用本来就动态的ViewChildren。它具有一个changes方法,当您用查询名称标记的元素发生更改/修改时,可以观察到该事件发出。

我创建了一个stackblitz示例here,供您查看两个实现之间的含义。

希望这会有所帮助。