Angular Material 文本区域占位符和文本对齐问题

Question

我有一个角度的`textarea，如下所示：

在角度上，我有：

<div *ngIf="whetherDisplay()" class="textarea-text">
  <mat-form-field appearance="outline" >
     <textarea matInput name="myTextarea" disabled class="myTextarea" rows="3" 
                      placeholder="This is a placeholder">
         {{ ttsText }}
      </textarea>
   </mat-form-field>
</div>

CSS:

.greeting-tts-text {
    width: 65%;
    margin: 5px auto 0 auto;
}

这里有两个问题。

1. 没有看到应该漂浮在textarea上方的placeholder 。
2. 文本textarea中文本的开头（“这是虚拟文本”）移到右侧。 为什么会这样？

我做错了什么？

Answer 1

这是因为你在textarea中没有标签，因为你需要像这样的floatLabel="never"

   <mat-form-field appearance="outline" floatLabel="never" class="display-block">
        <textarea rows="3" matInput placeholder="Type here..." disabled></textarea>
   </mat-form-field>

来自 Angular Materiel Doc Float label never

Answer 2

只需删除 {{}} 标签并在 textarea 标签内添加 [(ngModel)]="ttsText" 即可。 <textarea matInput name="myTextarea" disabled class="myTextarea" rows="3" placeholder="This is a placeholder" [(ngModel)]="ttsText">