Question

我正在尝试学习Angular 2，所以我正在构建一个简单的网站，使大学生可以跟踪自己的成绩。

我有两个组件，主要的视图组件和包含表格和其他内容的“学期”组件。

我想做的是在主视图中按一个按钮，让它创建一个新的学期，然后显示它。

这是我的学期内容：

import { Component, ViewChild } from '@angular/core';
import {MatTable} from '@angular/material';
import { Directive, ViewContainerRef } from '@angular/core';

@Component({
    selector: 'semester-',
    styleUrls: ['./Semester.css'],
    templateUrl: './Semester.html'
})
export class Semester {
    @ViewChild('courseTable') courseTable: MatTable<course>;
    courses: course[] = [];
    displayedColumns: string[] = ['courseNumber', 'courseName', 'grade', 'credits'];
    possibleGrades: string[] = ['A', 'A-', 'B+', 'B','B-','C+','C','C-','D+','D','D-','F','P','W' ];
    dataSource = this.courses;
    season: string;
    year: number;
    constructor() {
        this.season = 'Spring';
        this.year = 2018;
    }


    addCourse() {
        this.courses.push({courseID: '', courseName: 'Course Name', grade: 'A', credits: 0});
        this.courseTable.dataSource = this.courses;
        this.courseTable.renderRows();
    }
}

export interface course {
    courseID: string;
    courseName: string;
    grade: string;
    credits: number;
}

这是我的main.html

<h1 id="mainHeader">College Crammer</h1>
    <mat-sidenav-container style="background-color: darkgray; border-radius: 10px;">
      <mat-sidenav-content>
        <mat-card id="masterCard">
          <h1>Add Some Data</h1>
    
          <div *ngFor="let semester of semesters">{{semester}}</div>
          <button mat-raised-button matTooltip="Add another semester to your plan" (click)="addSemester()">Add another semester</button>
        </mat-card>
      </mat-sidenav-content>
      <mat-sidenav>
        <mat-card id="sideCard">
          <h1>This is my sidebar</h1>
        </mat-card>
      </mat-sidenav>
    </mat-sidenav-container>

从某种意义上说，这是“有效的”，当我按下按钮时，它熄灭了[object Object]。我需要它来显示学期对象模板中的HTML，就像我键入的一样。

任何帮助将不胜感激，我真的是Angular的新手（从今天开始），我搜寻了文档，但没有发现任何有帮助的东西。

在Angular 2中显示卡中的组件

0 个答案: