javascript - 如何在 Angular Material 网站上显示大内容？

Question

我有一个angular 9 + material的应用程序。

我有大量内容需要在我的页面上显示。

但是下面的代码没有在网站上显示全部内容。

堆栈闪电编辑器

https://stackblitz.com/edit/angular-dn7nqs-gqyvsh

堆栈闪电战网站

https://angular-dn7nqs-gqyvsh.stackblitz.io

谁能告诉我我们可以使用哪种材料组件？

组件.html

<mat-grid-list [cols]="7">
    <mat-grid-tile [colspan]="1"></mat-grid-tile>
    <mat-grid-tile [colspan]="4">
        <span>
            WASHINGTON : More than 4.4 million laid-off workers applied for U.S. unemployment benefits last week as job
            cuts escalated across an economy that remains all but shut down, the government said Thursday.

            Roughly 26 million people have now filed for jobless aid in the five weeks since the coronavirus outbreak
            began forcing millions of employers to close their doors. About one in six American workers have now lost
            their jobs since mid-March, by far the worst string of layoffs on record. Economists have forecast that the
            unemployment rate for April could go as high as 20%.

            The enormous magnitude of job cuts has plunged the U.S. economy into the worst economic crisis since the
            Great Depression of the 1930s. Some economists say the nation’s output could shrink by twice the amount that
            it did during the Great Recession, which ended in 2009.

            The painful economic consequences of the virus-related shutdowns have sparked angry protests in several
            state capitals from crowds demanding that businesses reopen. Some governors have begun easing restrictions
            despite warnings from health authorities that it may be too soon to do so without sparking new infections.
            In Georgia, gyms, hair salons and bowling alleys can reopen Friday. Texas has reopened its state parks.

            Yet those scattered re-openings won’t lead to much rehiring, especially if Americans are too wary to leave
            their homes. Most people say they favor stay-at-home orders and believe it won’t be safe to lift social
            distancing guidelines anytime soon. And there are likely more layoffs to come from many small businesses
            that have tried but failed to receive loans from a federal aid program.

            The total number of people who are receiving unemployment benefits has reached a record 16 million,
            surpassing a previous high of 12 million set in 2010, just after the 2008-2009 recession ended. This figure
            reflects people who have managed to navigate the online or telephone application systems in their states,
            have been approved for benefits and are actually receiving checks.

            In some states, many laid-off workers have run into obstacles in trying to file applications for benefits.
            Among them are millions of freelancers, contractors, gig workers and self-employed people — a category of
            workers who are now eligible for unemployment benefits for the first time.

            THIS IS A BREAKING NEWS UPDATE. AP’s earlier story is below:

            The U.S. government is set Thursday to issue another gloomy report on the layoffs that have swept through
            America’s workforce since the coronavirus outbreak forced businesses to shut down beginning last month.

            The Labor Department will likely report that several million more people filed for unemployment benefits
            last week, after nearly 22 million applied for aid in the previous four weeks. It represents by far the
            largest streak of U.S. job losses on record.

            Throughout the economy, nonessential businesses have closed, although some governors have begun easing
            restrictions despite warnings from health authorities that it may be too soon to do so without sparking new
            infections.

            For April, some economists say the unemployment rate could reach as high as 20%. That would be the highest
            jobless rate since the Great Depression, when it reached 25%.

            Layoffs have spread throughout the economy, from front-line service industries like restaurants, hotels and
            retail stores to white collar and professional occupations.
        </span>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="2">
        <mat-card class="dashboard-card">
            <mat-card-header>
                <mat-card-title>
                    Card 2
                </mat-card-title>
            </mat-card-header>
            <mat-card-content class="dashboard-card-content">
                <div>Card Content Here</div>
            </mat-card-content>
        </mat-card>
    </mat-grid-tile>
</mat-grid-list>

组件.css

.dashboard-card {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
  }

  .more-button {
    position: absolute;
    top: 5px;
    right: 10px;
  }

  .dashboard-card-content {
    text-align: center;
  }

组件.ts

@Component({
  selector: 'app-post-view',
  templateUrl: './post-view.component.html',
  styleUrls: ['./post-view.component.css']
})
export class Component implements OnInit {

  public isMobile: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) {
    breakpointObserver.observe([
      Breakpoints.Handset
    ]).subscribe(result => {
      this.isMobile = result.matches;
    });
  }

  ngOnInit(): void {
  }
}

当前页面

标签： javascriptcssangularangular-material