Question

提前抱歉。我是Angular的新手，所以我确定我不知道足够的词汇来谷歌正确的东西。我试图创建一个简单的CRUD应用程序，但我的编辑功能不起作用。

问题

无论我从我的信息中心点击哪一行，当编辑视图显示时，它始终在表单输入中具有相同的值。当我在edit.component.ts -> ngOnInit()中记录routerParam时，它始终具有相同的值，但我的dashboard.component.html模板看起来应该为gotoEdit方法提供正确的参数。我的绑定有问题吗？
在edit.component.ts -> ngOnInit()我收到错误消息Type 'string' is not assignable to type 'Row'.我尝试将email routeParam转换为Row并创建新的{{} 1}}来自temp的值的实例，但都失败了。

理想情况下，我希望绕过Row方法并让gotoEdit将行传递到DashboardComponent的{{1}}属性，但我不知道如何。

路由器配置

EditComponent

行类

email

Dashboard.component.html

@RouteConfig([
  { path: '/dashboard',  name: 'Dashboard',  component: DashboardComponent ,  useAsDefault: true },
  { path: '/insert',  name: 'Insert',  component: InsertComponent },
  { path: '/edit/:email',  name: 'Edit',  component: EditComponent }
])

dashboard.component.ts

export class Row {
    PK: number;
    BudgetCenter: string;
    EmailAddress: string;
}

edit.component.html

<p>All Emails</p>
<table class="table table-condensed table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>Budget Center</th>
            <th>Email Address</th>
            <th><a (click)="gotoAdd()" ><span class="glyphicon glyphicon-plus"></span></a></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let email of emails">
            <td>{{email.PK}}</td>
            <td>{{email.BudgetCenter}}</td>
            <td>{{email.EmailAddress}}</td>
            <td>
                <a (click)="gotoEdit(email)"  ><span class="glyphicon glyphicon-pencil"></span></a>
                <a (click)="deleteRow(email)" ><span class="glyphicon glyphicon-trash"></span></a>
            </td>
        </tr>
    </tbody>
</table>

edit.component.ts

import { Component, OnInit } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { Router } from '@angular/router-deprecated';
import { EmailService }  from './email.service';
import { Row } from './row';

@Component({
  selector: 'my-dashboard',
  templateUrl: 'app/dashboard.component.html',
  directives: [ROUTER_DIRECTIVES]
})
export class DashboardComponent implements OnInit {
  emails: Row[] = [];

  constructor (
      private emailService: EmailService,
      private router: Router ) {
  }

  gotoAdd()
  {
    this.router.navigate(['Insert']);
  }

  gotoEdit(row: Row)
  {    
    //this.router.navigate(['Edit', row]);
    console.log('in gotoEdit()');
    this.router.navigate(['Edit', {email: row}]);
  }

  deleteRow(row: Row)
  {
    let index: number = this.emails.indexOf(row, 0);
    if (index > -1) {
      //console.log('found it', index);
      this.emailService.deleteRow(row);
      this.emails.splice(index,1);
    }
  }

  ngOnInit() {
    this.emailService.get().then(emails => this.emails = emails);
  }

}

Answer 1

您应该只通过路由器传递当前电子邮件的ID，然后通过该ID从EmailService获取。像maxisam建议您可以使用新的路由器，然后您将获得EditComponent内的路由更改为Observable。

类似的东西：

ngOnInit() {
    this.sub = this.route
      .params
      .subscribe(params => {
        const id = +params['id'];
        this.emailService.get(id)
          .then(email => {
            this.email = email;
          });
      });
  }

Angular 2路由器类实例

1 个答案: