Question

大家好，当我使用纯HTML格式进行渲染时，我在列表中的article-list-component.html内渲染了article.component.html，效果很好（参见图片1）：标题-作者-日期这是我的article-list.component.html

<ul>
    <li *ngFor="let article of data_array">
        <a [href]="article.url" class="undecorateda" target="_blank">
            <app-article [data]='article'></app-article>
        </a>
    </li>
</ul>

但是当我尝试使用角度材质列表时，该组件将全部渲染到左侧（如下图2所示）：标题作者日期这是我的article-list.component html：

<mat-list>
    <mat-list-item *ngFor="let article of data_array">
        <a [href]="test">
            <app-article [data]='article' (click)="printURL(article.url)"></app-article>
        </a>
    </mat-list-item>
</mat-list>

当我在article-list.component.html中使用纯HTML时，它将按我的意愿进行渲染，但是，如果我在article-list.component.html中使用了材料代码，它将无法正确呈现

这是article.component.html

<div class='article-container'>

    <div class='title-container'>
        {{data.title}}
        <div class='author-container'>
            -{{data.author}}-
        </div>
    </div>

    <div class='date-container'>
        {{formatDay(data.created_at)}}
    </div>

    <div class="actions-container" id="deletebtn">
        <button mat-icon-button color="warn" (click)="deleteArticle(data._id)">
            <mat-icon>delete_forever</mat-icon>
        </button>
    </div>

</div>

这是article.component.css文件：

.article-container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 10fr 2fr 1fr;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    align-items: center;
    padding: 0 15px;
}

.article-container>* {
    grid-row: 1/2;
}

.article-container #deletebtn {
    display: none;
}

.article-container:hover {
    background-color: #fafafa;
}

.article-container:hover #deletebtn {
    display: block;
}

.title-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    color: #333;
    font-size: 13pt;
}

.author-container {
    color: #999;
    font-size: 10pt;
    margin-top: 3px;
}

.date-container {
    color: #333;
    font-size: 13pt;
}

.title-container div {
    padding: 0 15px;
}

基本上我想要的是在article-list.component.html中使用材质角列表，并且它呈现出如图1所示的良好效果

========================================

Answer 1

如果您为商品组件本身添加100％的宽度，则应确保组件采用整个宽度，列表也将采用整个宽度。

:host {
  width: 100%;
}

看看这个示例here，看看列表占据了宽度的100％。

如何修复垫列表项不占用行的全部空间

1 个答案: