有没有一种方法可以显示带有文本的带有标签的静态文本，该标签的样式类似于输入，以便它们共享版式？

Question

我正在使用Angular材质构建表单。在某些地方，我希望包含静态文本和标签，其样式就像表单输入一样，除非没有交互性且没有下划线，像这样。

我已经可以通过自定义类将其破解：

      <mat-form-field floatLabel="always" class="static-text">
        <input matInput disabled placeholder="My Label" value="My Text" />
      </mat-form-field>

      .static-text {

        :disabled {
          color: black;
        }

        ::ng-deep .mat-form-field-underline {
          display: none;
        }
      }

但是，我必须同时包含disabled属性和自定义类。我还尝试仅将静态文本元素与内置的角材料排版类一起使用，但是由于没有将它们包裹起来的mat-form-field元素，因此它们无法正确显示。

<div>
    <p class="mat-caption">My Label</p>
    <p class="mat-body">My Text</p>
</div>

实际上是否有内置的方法可以执行此操作，或者是另一种标准实现？

Answer 1

您可以执行另一种简单的操作

在角形材质中，有许多按钮类型，您可以选择所需的垫按钮，并可以将CSS属性应用为pointer-events: none;

这将作为您想要的简单标签。.

Answer 2

据我所知，Angular Material的API中没有该选项。您要查找的是本机Angular或HTML。

在Angular内，执行：[disabled]="true"（或真实条件代替true）。在Angular中，您还可以执行[readonly]="true"。