Question

我正在尝试根据列表索引覆盖angular material2 mat-list-item-content样式。

组件HTML：

<div fxLayout="column" fxLayoutAlign="start center" fxFill>
    <mat-list dense class="mat-list">
      <mat-list-item *ngFor="let message of messages" class="{{message.float}}">
         <mat-label>{{message.text}}</mat-label>
      </mat-list-item>
    </mat-list>
</div>

组件CSS

.left .mat-list-item-content {
  float: left;
}

.right .mat-list-item-content {
  float: right;
}

由于

Answer 1

您可以使用弹性框 justify-content

设置mat-list-item的对齐方式

<mat-list role="list">
  <mat-list-item class="left" role="listitem">
   LEFT
  </mat-list-item>
  <mat-list-item class="right" role="listitem">
     Right
  </mat-list-item>
</mat-list>

以下是风格。请注意，您应该将此样式设置为根样式（/src/styles.css），否则此样式将不起作用。

/* LEFT align */
.mat-list .mat-list-item.left .mat-list-item-content{
      justify-content: flex-start;
}

/* RIGHT align */
.mat-list .mat-list-item.right .mat-list-item-content{
      justify-content: flex-end;
}

/* If you will use matLine */

  /* LEFT align */
.mat-list .mat-list-item.left .mat-list-text>*{
  margin: 0 auto 0 0;
}
  /* RIGHT align */
.mat-list .mat-list-item.right .mat-list-text>*{
  margin: 0 0 0 auto;
}

请参阅此链接以获取实时示例代码https://stackblitz.com/edit/so-answer-alignment-list?file=styles.css

Answer 2

您已使用class="message.float"为class属性分配了一个表达式，但class属性不理解表达式并将message.float解释为类名（检查您的DOM）。

您需要使用ngClass [ngClass]="message.float"或绑定表达式class="{{message.float}}"

（message.text应该遇到同样的问题。）

Answer 3

:host ::ng-deep .mat-list-base .mat-list-item .mat-list-item-content {
justify-content: left;

}

您可以使用上面的代码定位列表项。它对我有用

Answer 4

此解决方案对我有帮助，您可以根据需要尝试。

<mat-nav-list>
  <a mat-list-item disableRipple="true" class="nav-link"
     [routerLink]="link.path"
     *ngFor="let link of links">

     <div style="width: 100%; text-align: center;">{{ link.name }}</div>

  </a>
</mat-nav-list>

Answer 5

我尝试了上述解决方案，但它们适用于mat-list-item，但不适用于mat-list-option。

仅使用class Api::V1::PropertiesController < ApplicationController def index properties = Property.all render json: PropertySerializer.new(properties).to_serialized_json end def create property = Property.new(property_params) if property.save! render json: property_params else render :new end end private def property_params params.require(:id, :price, :rent, :year_built, :last_year_appreciation, :next_year_appreciation, :lease_length, :beds_baths_sqft, :description, :zone, :address) end end即可完成工作。

text-align

Angular Material2 mat-list-item-content position

5 个答案: