angular - 我无法导航到我的关于选项卡在 coursera 上的 Angular js 作业中。为什么？

Question

我现在正在做前端 JavaScript 框架的第二个作业：coursera 平台上的 Angular。我按照指示做了所有的指示。但问题是我无法导航到我的关于选项卡。有人能帮助我吗？我的指示是：任务 1

在此任务中，您将添加一个新的领导服务，该服务将提供餐厅企业领导的详细信息。下面的 JavaScript 对象数组中给出了公司领导者的详细信息：

根据上面在leaders.txt中给出的JavaScript对象数组的结构，在共享文件夹中名为leader.ts的文件中创建一个名为Leader的新类，在名为leaders的文件中基于Leader类创建一个名为LEADERS的新常量。 ts 在共享文件夹中并将其导出，创建一个名为 leader 的新服务，该服务将提供上面 leader.txt 中给出的公司领导人的详细信息，并更新 AppModule 以包含新服务并使其可用于应用程序的其余部分. 任务 2

在此任务中，您将把 AboutComponent 集成到单页应用程序中。要开始，首先更新 about.component.html 如下：

<div class="container"
  fxLayout="column"
  fxLayoutGap="10px">

  <div fxFlex>
    <div>
        <h3>About Us</h3>
        <hr>
    </div>
  </div>
<div fxFlex>
    <h2>Corporate Leadership</h2>
    <p>Display the details of the corporate leaders here</p>
  </div>
</div>

更新 about.component.ts 文件以获取领导者的详细信息并使其可用于模板，更新 about.component.html 文件以使用 matList Angular Material 组件显示公司领导者的详细信息。更新路由以包含指向名为“aboutus”的新路径的路由，并更新页眉和页脚中的链接以启用导航到 About Us 视图。任务 3

在此任务中，您将使用向 HomeComponent 添加新卡片来显示特色企业领导者的详细信息：

更新 home.component.html 以在卡片中包含特色企业领导者的详细信息，并更新 home.component.ts 以获取特色领导者的详细信息并使其可用于模板。我的领导者.ts 文件：

import { Leader } from "./leader";

export const LEADERS:Leader[]=[
   

     {
          id: '0',
          name: 'Peter Pan',
          image: '/assets/images/alberto.png',
          designation: 'Chief Epicurious Officer',
          abbr: 'CEO',
          featured: false,
          // tslint:disable-next-line:max-line-length
          description: 'Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother\'s wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which The Frying Pan became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.'
        },

我的about.component.ts文件在这里：

import { Component, OnInit, Input } from '@angular/core';
import { LEADERS } from '../shared/leaders';
import { Leader } from '../shared/leader';
import { LeaderService } from '../services/leader.service';

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

  @Input()
  leaders:Leader[]=[]
  constructor(private leaderService:LeaderService) { }

  ngOnInit(): void {
    this.leaders= this.leaderService.getLeaders();
  }

}

我的about.component.html文件在这里：

<div class="container"
            fxLayout="column"
            fxLayoutGap="10px">

            <div fxFlex>
                <div>
                <h3>About Us</h3>
                <hr>
            </div>
        </div>

        <div fxFlex>
            <div fxLayout="column" fxLayout.gt-sm="row">
            <div fxFlex="70">
                <h2>Our History</h2>
                <p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong.  Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
                <p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
            </div>
            <div fxFlex="30">
                <mat-card>
                <mat-card-header>
                    <mat-card-title>
                    <h2>Facts At a Glance</h2>
                    </mat-card-title>
                </mat-card-header>
                <mat-card-content>
                    <dl>
                    <dt>Started</dt>
                    <dd>3 Feb. 2013</dd>
                    <dt>Major Stake Holder</dt>
                    <dd>HK Fine Foods Inc.</dd>
                    <dt>Last Year's Turnover</dt>
                    <dd>$1,250,375</dd>
                    <dt>Employees</dt>
                    <dd>40</dd>
                    </dl>
                </mat-card-content>
                </mat-card>
            </div>
            </div>
        </div>
        
        <div fxFlex>
            <mat-card>
            <blockquote>
                <h3>You better cut the pizza in four pieces because
                    I'm not hungry enough to eat six.</h3>
                <footer>-- Yogi Berra,
                <cite>The Wit and Wisdom of Yogi Berra,
                    P. Pepe, Diversion Books, 2014</cite>
                </footer>
            </blockquote>
            </mat-card>
        </div>


        <div fxFlex>
            <h2>Corporate Leadership</h2>
            <mat-list fxFlex>
                <mat-list-item *ngFor="let leader of leaders">
                    
                    <h4 matline>{{leader.name}}|{{ leader.abbr}}</h4>
                    <h5 matline>{{leader.designation}}</h5>
                    <p matLine>
                        <span>{{leader.description}}</span>
                    </p>
                </mat-list-item>
            </mat-list>
    </div>
</div>

标签： angular