Angular 内有文本框的复选框

我有如下所示的离子3/角度复选框列表。它工作正常。但现在我有一个要求，如果I.display是其他的，则该复选框应转换为文本框，如下面的视频。你知道如何创建这样的组件或任何现有的这样的组件吗

.html

---

您可以构建一个自定义组件，通过ng if else语句和ng模板控制显示复选框或输入

我只是用普通的HTML元素做了一个例子，请参见

对不起，我对爱奥尼亚不太了解，您可能需要将这些元素转换为爱奥尼亚元素

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div *ngIf="showCheckbox; else elseBlock">
        <label for="checkbox" (click)="toggle(false)">
          <input id="checkbox" type="checkbox">test
        </label>
      </div>
      <ng-template #elseBlock>
        <input type="text" (keypress.enter)="toggle(true)" (blur)="toggle(true)">
      </ng-template>
    </div>
  `,
})
export class App {
  name:string;
  showCheckbox = true;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  toggle(value) {
    this.showCheckbox = value;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

---

听起来你可能会用到这个。实际上，我可以处理逻辑部分。我的问题是如何创建这样一个组件。复选框里面有文本框吗？有什么想法吗@对不起，我不知道你会怎么做。我认为最好通过条件行显示/隐藏复选框/文本输入

//our root app component
import {Component, NgModule, VERSION} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <div *ngIf="showCheckbox; else elseBlock">
        <label for="checkbox" (click)="toggle(false)">
          <input id="checkbox" type="checkbox">test
        </label>
      </div>
      <ng-template #elseBlock>
        <input type="text" (keypress.enter)="toggle(true)" (blur)="toggle(true)">
      </ng-template>
    </div>
  `,
})
export class App {
  name:string;
  showCheckbox = true;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  toggle(value) {
    this.showCheckbox = value;
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}