求助：TypeScript中无法用文本框替换字符串，Angular2/4需替换__为文本框

我来帮你搞定这个问题！在Angular里要把字符串里的__替换成可交互的文本框，咱们可以通过字符串拆分+模板动态渲染的方式来实现，下面是具体步骤和代码示例：

1. 组件逻辑处理（TypeScript部分） #

首先在你的组件类里，定义需要处理的原始字符串，然后通过split('__')方法把它拆分成数组——这样数组里的元素就是__分隔开的文本片段，我们后续可以在这些片段之间插入文本框。

比如：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  originalText = "Hello __, please enter your __ here";
  textSegments: string[];

  ngOnInit() {
    // 按__拆分字符串
    this.textSegments = this.originalText.split('__');
  }
}

2. 模板动态渲染（HTML部分） #

接下来在模板里，用*ngFor循环遍历拆分后的文本片段，在每一个片段（除了最后一个）后面添加一个文本框。这里推荐用<ng-container>来包裹循环，避免生成多余的DOM元素：

<div class="text-with-inputs">
  <ng-container *ngFor="let segment of textSegments; let i = index">
    <!-- 渲染文本片段 -->
    <span>{{ segment }}</span>
    <!-- 除了最后一个片段，后面都添加文本框 -->
    <input type="text" class="input-field" *ngIf="i !== textSegments.length - 1">
  </ng-container>
</div>

3. 可选：绑定表单控件（双向绑定） #

如果需要获取用户在文本框里输入的内容，可以结合Angular的表单模块来实现双向绑定。比如使用FormArray来管理多个文本框的值：

更新TypeScript代码： #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormArray } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  originalText = "Hello __, please enter your __ here";
  textSegments: string[];
  inputForm: FormArray;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.textSegments = this.originalText.split('__');
    // 根据__的数量创建对应数量的表单控件
    const inputControls = this.textSegments.slice(0, -1).map(() => this.fb.control(''));
    this.inputForm = this.fb.array(inputControls);
  }

  // 获取所有输入的值
  getInputValues() {
    console.log(this.inputForm.value);
  }
}

更新模板代码： #

<div class="text-with-inputs">
  <ng-container *ngFor="let segment of textSegments; let i = index">
    <span>{{ segment }}</span>
    <input 
      type="text" 
      class="input-field" 
      *ngIf="i !== textSegments.length - 1"
      [formControl]="inputForm.at(i)"
    >
  </ng-container>
</div>
<button (click)="getInputValues()">查看输入值</button>

4. 样式优化（可选） #

可以给文本框加一些基础样式，让它和文本更协调：

.input-field {
  margin: 0 8px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 120px;
}

.text-with-inputs {
  line-height: 1.5;
}

这样就能完美实现把字符串中的__替换成可交互的文本框啦，而且还能轻松获取用户输入的内容！

内容的提问来源于stack exchange，提问作者Saurabh Sharma