Отображение компонента внутри карты в angular 2

Я пытаюсь изучить 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]. Мне нужно, чтобы он отображал HTML в шаблоне объекта семестра, как если бы я печатал.

Любая помощь будет принята с благодарностью, я действительно новичок в Angular (только начал сегодня), и я просмотрел документацию, но не нашел ничего, что могло бы помочь.

проверьте это jaxenter.com/dynamically-create-component-angular-142720.htm l

Pranoy Sarkar 26.10.2018 05:30
1
1
213
0

Другие вопросы по теме