用输入字段Javascript / Angular2替换某些单词 [英] Replace certain words with input fields Javascript/Angular2
问题描述
我有一个字符串'我喜欢橙色,蓝色,黑色,粉红色,玫瑰色,黄色,白色,黑色'。
是否可以用输入字段替换黄色和黑色字样,所以我可以输入我自己的颜色?
I have a a string 'I like orange, blue, black, pink, rose, yellow, white, black'. Is it possible to replace words yellow and black with input fields, so I could type in my own colours?
const a: string = 'I like orange, blue, black, pink, rose, yellow, white, black';
const b: string =['black', 'yellow'];
所以我想要这样的东西 link
So I would like to have something like this link
是否可以使用javascript或angular2执行此操作?..
Is it possible to do this with javascript or angular2?..
请帮助我...
这是完整代码
part2 .component.ts
part2.component.ts
import { Component, OnInit } from '@angular/core';
import { DataService } from '../sample02-simpleService/data.service';
@Component({
moduleId: module.id,
selector: 'part2',
template: `
<p>{{text}}</p>
<p>{{itemsSource}}</p>
`,
providers: [DataService]
})
export class Part2Component implements OnInit {
text = 'Hallo';
public itemsSource: string;
public itemsSource2: string[];
public abc: string[];
constructor(public dataService: DataService) {
}
ngOnInit() {
this.abc = this.dataService.getData3();
this.itemsSource = this.dataService.getData2();
this.itemsSource = this.itemsSource.replace(new RegExp(this.abc.join('|'), 'g'), function myFunction(){return document.write('<input>'); });
}
}
我从DataService获取数据,所以从这里
And I get data from DataService, so from here
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;
}
}
推荐答案
更新:
在了解了您的要求后,我已相应更改了实施技术并更新了答案。我没有使用 angular-pipe (建议用于显示目的),而是创建了如下的简单组件
After understanding your requirement, I have changed implementation technique and updated answer accordingly. Instead of using angular-pipe(recommended to use for display purpose) I have created simple component as follows
import { Component, EventEmitter, OnInit, Input, Output } from '@angular/core';
@Component({
selector: 'fill-in-blank',
template: `
<ng-container *ngFor="let text of texts; let i = index">
{{text}}<input *ngIf="i!==texts.length-1" type="text" [(ngModel)]="value[i]" (ngModelChange)="onValueChange()">
</ng-container>
`
})
export class FillInBlankComponent implements OnInit {
@Input() textline: string;
@Input() fields: string[];
@Output() valueChanged = new EventEmitter();
texts: string[];
value: string[] = [];
constructor() {}
ngOnInit() {
let regex = null;
if (this.fields && this.fields.length > 0) {
regex = new RegExp(this.fields.join("|"), 'gi');
}
this.texts = this.textline.split(regex);
}
onValueChange(index) { // Updated According to requirement
this.valueChanged.emit({ index: index, value: this.value[index] });
}
}
使用上面的组件,你想要像这样渲染它
Use above component where you want to render it like this
<fill-in-blank [textline]="a" [fields]="b" (valueChanged)="printValue($event)"></fill-in-blank>
要构建您的答案数组,您需要在 ngInit <中调用以下方法/ code>。这就是你的父组件应该是这样的
To build your array of answer you need to call following method in ngInit
. This is how your parent component should look like
export class ParentComponent implements OnInit {
a: string = 'I like orange, blue, black, pink, rose, yellow, white, black';
b: string[] = ['blue', 'black'];
ans: string[] = [];
constructor() { }
ngOnInit() {
this.createAnswers();
}
printValue($event) {
if (this.ans[$event.index] === $event.value) {
console.log('correct input', $event);
}
}
createAnswers() {
let ansWithIndex = [];
this.b.forEach(value => {
let index = 0;
let startIndex = 0;
while ((index = this.a.indexOf(value, startIndex)) > -1) {
ansWithIndex.push({ index: index, value: value });
startIndex = index + 1;
}
});
this.ans = ansWithIndex.sort((v1, v2) => v1.index > v2.index ? 1 : -1).map(v1 => v1.value);
}
}
确保添加了模块声明部分中的FillInBlankComponent
。
这篇关于用输入字段Javascript / Angular2替换某些单词的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!