从输入中读取数据，由管道提供，Angular 2答案

【问题标题】：Read data from inputs, provided by Pipes, Angular 2从输入中读取数据，由管道提供，Angular 2
【发布时间】：2017-06-14 18:55:39
【问题描述】：

我有一个文本，其中有输入。这些输入由 Pipe 提供（我需要用这些输入替换一些单词）。现在我想在每个输入中写入不同的单词，并将其存储到 obj，所以如果我输入前 3 个输入，比如 red、green、apple，它会存储到 object { “0”：“红色”， “1”：“绿色”， “2”：“苹果”， }

这里是代码

管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({name: 'replacer'})
export class SanitizeHtml implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(data, arg) {
    arg.forEach(item => data = data.replace(new RegExp(item, 'g'), '<input type="text" >'));
    return this.sanitizer.bypassSecurityTrustHtml(data);
  }
}

我想我需要在管道中的这个输入上挂一些东西，比如

<input type="text" name="{{i}}" ngModel #prix="ngModel" [id]="i">

但是现在不行了……

我的组件是

@Component({
  moduleId: module.id,
  selector: 'part2',
  template: `   
    <p>{{values}}</p>
    <p>{{abc}}</p>
    <div [innerHtml]="itemsSource | replacer: abc"></div>
    <button>Ok</button>
    <p>Score  <input/></p>
    <pre>{{f.value | json}}</pre>
  `,
  providers: [DataService]

})
// @Pipe({name: 'replacer'})
export class Part2Component implements OnInit {

  @ViewChildren ('prix') inputs;
  public itemsSource: string;
  public abc: string[];
  constructor(public dataService: DataService) {
  }

  ngOnInit() {
    this.abc = this.dataService.getData3();
    this.itemsSource = this.dataService.getData2();
  }
}

我使用来自 Dataservice 的数据

import { Injectable } from '@angular/core';

          @Injectable()
export class DataService {
              getData2() {
              let items3: string = 'I like orange, blue, black, pink, rose, yellow, white, black';
              return items3;
            }
            getData3(){
              let items4: string[] = ['black', 'yellow'];
              return items4;
            }
          }

所以，现在我有Picture 这个例子，我希望能够输入文字并显示为对象Picture 2 {"0": "苹果", “1”：“绿色”， “2”：“棕色”，}

请帮帮我...

【问题讨论】：

标签： javascript angular typescript input

【解决方案1】：

您可以验证此帖子Equivalent of $compile in Angular 2 以使用动态组件，例如 Angular 1 的 $compiler，并在 Pipe 创建的输入上插入 ngModel。解决此问题的其他方法是获取输入值，如下面的代码：

import {Component, OnInit, ViewChildren} from "@angular/core";
import {SanitizeHtml} from "./PipeTeste";
@Component({
  selector: 'part2',
  template: `
    <p>{{values}}</p>
    <p>{{abc}}</p>
    <div [innerHtml]="itemsSource | replacer: abc"></div>
    <button (click)="buttonOk()">Ok</button>
    <p>Score  <input/></p>
    <pre>{{obj}}</pre>
  `,
  providers: [SanitizeHtml]

})
// @Pipe({name: 'replacer'})
export class Part2Component implements OnInit {

  @ViewChildren ('prix') inputs;
  public itemsSource: string;
  public abc: string[];
  public obj: string[];
  constructor(public p:SanitizeHtml) {
  }

  buttonOk() {
    let a:any = document.getElementsByClassName('inputValue');
    this.obj = [];
    for(let i in a){
      if(a[i] && a[i].value){
        this.obj.push(a[i].value)
      }
    }
  }

  ngOnInit() {
    this.abc =  ['black', 'yellow'];
    this.itemsSource = 'I like orange, blue, black, pink, rose, yellow, white, black';
  }
}

希望对你有所帮助。

【讨论】：