Question

我有两个页面使用几乎相同的代码，但是浏览器中的行为却有所不同。 md-list-item在第一种情况下生成class=mat-multi-line，在第二种情况下生成class=mat-2-line。其实我要两行都用多行。

第一页：

<div id="dataDiv" *ngIf="results">
    <md-nav-list>
        <div id="nbResults">
            <div class="col-md-12">{{ results.length }} résultat{{ results.length > 1 ? 's' : '' }}</div>
        </div>
        <a md-list-item *ngFor="let i of results; let index = index" routerLink="/person-details/{{ i.peid }}">
            <div class="row grid">
                <div class="col-md-8 form-group">
                    <div class="row">
                        <span class="primaryName col-md-10">{{ i.primaryName }}</span>
                        <span class="col-md-2">
                            <i class="material-icons md-24" *ngIf="i.riskIcons.length > 0">warning</i>
                            <span *ngFor="let j of i.riskIcons; let indexj = index" [innerHTML]="j | riskcolor | safeHtml"></span>
                        </span>
                    </div>
                    <span>{{ i.title }}</span>
                </div>
                <div class="col-md-2 form-group">
                    <span md-line>Date de naissance</span>
                    <span md-line>{{ i.birthDay?i.birthDay:'??' }}/{{ i.birthMonth?i.birthMonth:'??' }}/{{ i.birthYear?i.birthYear:'????' }}</span>
                </div>
                <div class="col-md-2 form-group">
                    <span md-line>Pays</span>
                    <span md-line>{{ i.country }}</span>
                </div>
            </div>
        </a>
    </md-nav-list>
</div>

第二个：

<div id="dataDiv" *ngIf="results">
    <md-nav-list>
        <div id="nbResults">
            <div class="col-md-12">{{ results.length }} résultat{{ results.length > 1 ? 's' : '' }}</div>
        </div>
        <a md-list-item *ngFor="let i of results; let index = index" routerLink="/entity-details/{{ i.peid }}">
            <div class="row grid">
                <div class="col-md-10 form-group">
                    <div class="row">
                        <span class="primaryName col-md-10">{{ i.primaryName }}</span>
                        <span class="col-md-2">
                            <i class="material-icons md-24" *ngIf="i.riskIcons.length > 0">warning</i>
                            <span *ngFor="let j of i.riskIcons; let indexj = index" [innerHTML]="j | riskcolor | safeHtml"></span>
                        </span>
                    </div>
                    <span>{{ i.title }}</span>
                </div>
                <div class="col-md-2 form-group">
                    <span md-line>Pays</span>
                    <span md-line>{{ i.country }}</span>
                </div>
            </div>
        </a>
    </md-nav-list>
</div>

我正在使用Angular 4.1.3。我在Firefox和Chrome中对其进行了测试，两种浏览器的行为相同。当我减小窗口的宽度时，多行响应，但mat-2行却不响应。我试图强制多行：

<a md-list-item class="mat-multi-line" [...]

但没有成功。

md-list-item生成mat-2-行或mat-多行

0 个答案: