Question

我正在尝试从角度使用mat-expansion-panel，但我确实可以使用它，但是不知为何它无法正确显示。
展开面板未折叠时显示的文本无法正确显示。一切都打印在一行中，文本本身不适合扩展面板。

Problem[1

我的component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-theme-selection',
  templateUrl: './theme-selection.component.html',
  styleUrls: ['./theme-selection.component.css']
})
export class ThemeSelectionComponent implements OnInit {
  public themeList:Array<any> = null;

  constructor() { }
  ngOnInit() {
    this.themeList = [
      {
        "themeName":"Thema A",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema B",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema C",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema D",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      },
      {
        "themeName":"Thema E",
        "themeDescription":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."
      }
    ];
  }

.html

<div class="themeSelection">
        <mat-radio-group class="radioButtons">
            <mat-radio-button class ="radBtn" *ngFor="let theme of themeList" [value]="theme.themeName">
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            {{theme.themeName}}
                        </mat-panel-title>
                </mat-expansion-panel-header>
                            {{theme.themeDescription}}
                </mat-expansion-panel>
            </mat-radio-button>
        </mat-radio-group>
    </div>

.css

.themeSelection {
    width: 40vw;
    height: 70vh;
     margin: auto;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
}
mat-expansion-panel {
    width: 40vw;
  }

基本上我希望Lorem ipsum合适并在必要时进行换行（然后增加高度）

Answer 1

您应将{{theme.themeDescription}}包裹在p标记中。

.html

<div class="themeSelection">
        <mat-radio-group class="radioButtons">
            <mat-radio-button class ="radBtn" *ngFor="let theme of themeList" [value]="theme.themeName">
                <mat-expansion-panel>
                    <mat-expansion-panel-header>
                        <mat-panel-title>
                            {{theme.themeName}}
                        </mat-panel-title>
                </mat-expansion-panel-header>
                        <p class="myClass">
                            {{theme.themeDescription}}
                        </p>
                </mat-expansion-panel>
            </mat-radio-button>
        </mat-radio-group>
    </div>

.css

.myClass {
    width: 80%;
}

角垫扩展面板，文本太长且不适合

1 个答案: