md-list-item генерирует mat-2-line или mat-multi-line

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, одинаковое поведение для двух браузеров.Когда я уменьшаю ширину окна, многострочная отвечает, но не мат-2.Я попытался форсировать многострочность:

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

Но безуспешно.