Css Textarea包含多个受影响的值

我有一个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>

如何在同一文本区域字段中查看对象中的所有对象

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

会有用的。我强烈建议不要将textarea绑定到任何东西，也不要让任何用户修改您的对象

请注意，由于它依赖于JSON.stringify，您将无法转换循环结构，因此请小心使用您的解决方案

会有用的。我强烈建议不要将textarea绑定到任何东西，也不要让任何用户修改您的对象

请注意，由于它依赖于JSON.stringify，您将无法转换循环结构，因此请小心使用您的解决方案

您可以像这样使用[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_链接：

您可以像这样使用[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_链接：

---

我想这是一个答案

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>

---

我认为这是一个答案

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>

---

---

[value]=d？@Jazib我得到[object object]，我需要指定您能告诉我预期的输出应该是什么吗？@Jazib预期的输出是在文本区域[value]=d？@Jazib我得到[object object]中显示我的描述对象内的所有对象，我需要指定你能告诉我预期的输出应该是什么吗？@Jazib预期的输出是在TextArea中显示我的描述对象内的所有对象，但为什么我不能让用户修改我的描述object@brxnzaz这是一个严重的安全问题，在某些情况下会严重影响应用程序甚至API。不要让用户直接接触JS结构，除非用户知道他在做什么！相反，让他单独编辑每个字段。但导致此问题是否正常==>ExpressionChangedTerithasBeenCheckedError:检查后，表达式已更改。上一个值：“mat form字段应浮动：false”。当前值：“mat form field should float:true”。这可能来自您在ngAfterViewInit中正在执行的操作。但这与解决方案无关，这是一个生命周期问题，意味着您在检查视图后设置了变量的值。但是为什么我不能让用户修改我的object@brxnzaz这是一个严重的安全问题，在某些情况下会严重影响应用程序甚至API。不要让用户直接接触JS结构，除非用户知道他在做什么！相反，让他单独编辑每个字段。但导致此问题是否正常==>ExpressionChangedTerithasBeenCheckedError:检查后，表达式已更改。上一个值：“mat form字段应浮动：false”。当前值：“mat form field should float:true”。这可能来自您在ngAfterViewInit中正在执行的操作。但这与解决方案无关，这是一个生命周期问题，意味着您已在检查视图后设置了变量的值。如果对象具有77个属性怎么办？请你把它们都写下来好吗？恕我直言，我想这里不是这样的。即使是这样，我也建议创建一个字符串描述列表，而不是执行{{d|json}}，因为没有用户希望在屏幕上看到花括号，因为这是糟糕的用户体验，我有一个textarea字段，我想在其中查看对象对象的内容，但它只接受一个受影响的值=>这意味着在现场，您的解决方案不起作用，因为它将显示[object object][object]。回答你，我同意戴牙套不太好，但这似乎是OP所期望的。所有这些都表明您的解决方案有一个主要缺点，即可重用性。为了使其可重用，我们可以这样做：[innerHtml]=资助并返回所需的任何内容，但我不确定这里的优先级是什么：用户体验还是可重用性。根据斯内里奥的说法，我们应该做我们需要做的事情……除了回答问题，我们什么都不应该做。不需要做假设，OP会做他的工作，我们不必为他做：不管怎样，这只是我对你答案的两分钱！如果对象有77个属性呢？请你把它们都写下来好吗？恕我直言，我想这里不是这样的。即使是这样，我也建议创建一个字符串描述列表，而不是执行{{d|json}}，因为没有用户希望在屏幕上看到花括号，因为这是糟糕的用户体验，我有一个textarea字段，我想在其中查看对象对象的内容，但它只接受一个受影响的值=>这意味着在现场，您的解决方案不起作用，因为它将显示[object object][object]。回答你，我同意戴牙套不太好，但这似乎是OP所期望的。所有这些

---

要说您的解决方案有一个主要缺点，那就是可重用性。要使其可重用，我们可以这样做：[innerHtml]=资助并返回所需的任何内容，但我不确定这里的优先级是什么：用户体验还是可重用性。根据斯内里奥的说法，我们应该做我们需要做的事情……除了回答问题，我们什么都不应该做。不需要做假设，OP会做他的工作，我们不必为他做：不管怎样，这只是我对你答案的两分钱！