Angular2在Materialisecss模态中的双向绑定

Question

我在Angular2应用程序中使用Materialisecss，我想将一些数据显示到模态中并编辑它（双向绑定）。 当我使用模态触发器（在我的情况下是一个按钮）打开模态时，它确实显示但没有数据。

这是我的组件：

＆＃13;

＆＃13;

import { Component, OnInit, EventEmitter } from '@angular/core';
import { Location } from '@angular/common';
import { CompetenceService } from './../../core/services/competence-data.service';
import { Competence } from './../../models/competence';
import { Observable } from 'rxjs/Observable';
import "materialize-css";
import "angular2-materialize";
import { MaterializeAction, MaterializeDirective } from 'angular2-materialize';

@Component({
    selector: 'competence',
    templateUrl: './template/competence.html'
})
export class competenceComponent {
    competence: Competence;
    competenceliste: Observable<Array<Competence>>;

    constructor(private service: CompetenceService) { }

    ngOnInit() {
        this.competenceliste = this.service.GetFromCV();
    }


    model1Params = [
        {
            dismissible: false,
            complete: function () { console.log('Closed'); }
        }
    ]

    modalActions1 = new EventEmitter<string | MaterializeAction>();

    openModal() {
        this.modalActions1.emit({ action: "modal", params: ['open'] });
    }

    closeModal1() {
        this.modalActions1.emit({ action: "modal", params: ['close'] });
    }

    public modifcompetence() {
        this.service.Update(this.competence).subscribe();
        this.competence = null;
        this.competenceliste = this.service.GetFromCV();
    }
    delete(competence: Competence) {
        if (confirm("Voulez-vous vraiment supprimer cette compétence ?")) {
            this.service.Delete(competence).subscribe();
            this.competence = null;
            this.competenceliste = this.service.GetFromCV();
        }
    }
    updateButton(competence: Competence) {
        this.competence = competence;
    }

}

＆＃13;

＆＃13;

＆＃13;

，这是我的HTML

＆＃13;

＆＃13;

<div class="pagecontainers">
    <div class="competence">
        <h3>Liste des compétences</h3>

        <table border="0">
            <thead>
                <tr>
                    <th>Compétence</th>
                    <th>Catégorie</th>

                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let competence of competenceliste | async">
                    <td>{{competence.name}}</td>
                    <td>{{competence.categorie}}</td>
                    <td>
                        <a (click)="openModal()"
                           class="btn-floating btn-small waves-effect waves-light grey btnmodif modal-trigger">
                            <i class="material-icons">mode_edit</i>
                        </a>
                    </td>
                    <td>
                        <a (click)="delete(competence)"
                           class="btn-floating btn-small waves-effect waves-light red modal-trigger">
                            <i class="material-icons">delete</i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <div id="modal1" class="modal" materialize="modal" [materializeParams]="model1Params" [materializeActions]="modalActions1">
            <div class="modal-content">
                <div *ngIf="competence">
                    <h4>Modifier une compétence</h4>
                    <div class="input-field col s6">
                        <input type="text" class="form-control" id="modifcompetence"
                               required
                               [(ngModel)]="competence.name" name="modifcompetence">
                        <label class="active">Nom</label>
                    </div>
                    <div class="input-field col s6">
                        <input type="text" class="form-control" id="modifcompetence"
                               required
                               [(ngModel)]="competence.categorie" name="modifcompetence">
                        <label class="active">Catégorie</label>

                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="modal-action modal-close waves-effect waves-green btn-flat" (click)="closeModal1()">Annuler</button>
                <button type="button" (click)="modifcompetence()" class="modal-action modal-close waves-effect waves-green btn-flat">Modifier</button>
            </div>

        </div>

    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

任何帮助都将不胜感激。