Question

我有以下角度的html代码，

<div class="row" >
  <div class="col-lg-6 col-md-12 col-sm-12">
    <mat-card style="height:400px; display: grid; margin:7px 0px 7px 0px !important;">
      <mat-card-header>
          Number of Rides for last week days
      </mat-card-header>
      <mat-card-content style="padding-bottom: 0px">
        <ngx-charts-bar-vertical 
          [scheme]="barChartScheme" 
          [results]="data" 
          [gradient]="gradient" 
          [xAxis]="showXAxis" 
          [yAxis]="showYAxis"
          [legend]="showLegend" 
          [legendTitle]="title" 
          [animations]="true" 
          [showXAxisLabel]="showXAxisLabel" 
          [showYAxisLabel]="showYAxisLabel"
          [xAxisLabel]="xAxisLabel" 
          [yAxisLabel]="yAxisLabel" 
          (select)="onSelect($event)">
        </ngx-charts-bar-vertical>
      </mat-card-content>
    </mat-card>
  </div>
</div>

我正在将Bootstrap用于响应模型，

但是这里的mat-card-content ngx-chart并未占用mat-card空间的其余部分进行渲染，但是它会缩小为一行，如下所示：

mat-card-header显示正确。我已将其从屏幕截图中删除。

请帮助我，这是怎么回事。

Answer 1

我的工作很好：

DEMO

style.css：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

body {
  font-family: Lato;
  color: #212121;
  background-color: #f5f5f5;
  margin:20px
}

HTML：

<div class="row">
    <div class="col-lg-6 col-md-12 col-sm-12">
        <mat-card style="height:400px; display: grid; margin:7px 0px 7px 0px !important;">
            <mat-card-header>
                Number of Rides for last week days
            </mat-card-header> 
            <mat-card-content style="padding-bottom: 0px">
                <ngx-charts-bar-vertical [view]="view" [scheme] ="colorScheme" [results]="single" [gradient]="gradient" [xAxis]="showXAxis"
                 [yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel"
                 [yAxisLabel]="yAxisLabel" (select)="onSelect($event)">
                </ngx-charts-bar-vertical>
            </mat-card-content>
        </mat-card>
    </div>
</div>

TS：

  single: any[];
  multi: any[];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor() {
    Object.assign(this, { single })
  }

  onSelect(event) {
    console.log(event);
  }

app.module.ts：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgxChartsModule} from '@swimlane/ngx-charts';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatCardModule } from '@angular/material/card';


import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule,BrowserAnimationsModule, MatCardModule, FormsModule,NgxChartsModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
}) 
export class AppModule { }

席卡内容未正确显示

1 个答案: