Textarea具有多个受影响的值

Question

我有一个textarea字段，我想在其中查看对象对象的内容，但只接受一个受影响的值

这是我的对象：

{
  name: 'Will',
  test: 'test',
  type: ['variable', 'result'],
}

这是我的CSS文件中的文本区域：

<mat-form-field class="description" *ngFor="let d of description">
  <textarea
    [(value)]="d.name"
    matInput
    cdkTextareaAutosize
    cdkAutosizeMinRows="2"
    cdkAutosizeMaxRows="4"></textarea>
</mat-form-field>

如何在同一textarea字段中查看对象内部的所有对象

Answer 1

<mat-form-field class="description" *ngFor="let d of description">
  <textarea
    matInput
    cdkTextareaAutosize
    cdkAutosizeMinRows="2"
    cdkAutosizeMaxRows="4">{{ d | json }}</textarea>
</mat-form-field>

将起作用。我强烈建议不要将您的文本区域绑定到任何东西，也不要让任何用户修改您的对象。

请注意，由于它依赖于JSON.stringify，因此您将无法转换圆形结构，因此请谨慎使用您的解决方案。

Answer 2

我认为这是一个答案。

export class FormFieldOverviewExample implements OnInit {
  description = [
    {
      name: 'Will',
      test: 'test',
      type: ['variable', 'result'],
    }
  ]
  ngOnInit(){
    for(let i of this.description){
      (i as any).string = JSON.stringify(i);
    }
  }
}

<mat-form-field class="description" *ngFor="let d of description">
<textarea
  [value]="d.string"
  matInput
  cdkTextareaAutosize
  cdkAutosizeMinRows="2"
  cdkAutosizeMaxRows="4"></textarea>
</mat-form-field>

Answer 3

您可以像这样使用[innerHtml]：

<mat-form-field class="description" *ngFor="let d of description">
      <textarea
      [innerHtml]="d.name + ' ' + d.test "
        matInput
        cdkTextareaAutosize
        cdkAutosizeMinRows="2"
        cdkAutosizeMaxRows="4"></textarea>
    </mat-form-field>

看看我创建的这个stackbliz_link： https://stackblitz.com/edit/angular-mat-form-field-31d3vp?file=app%2Fform-field-prefix-suffix-example.html