Question

users.component.html中的错误无法绑定到用户，因为它不是app-user的已知属性。

单击用户名以显示其电子邮件错误无法绑定到用户我还在app-module.ts中添加组件名称，在用户数组中添加@input，但仍无法正常工作

user.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
 selector: 'app-users',
 templateUrl: './users.component.html',
 styleUrls: ['./users.component.css']
 })

 export class UsersComponent implements OnInit {

 @Input() users: Array<{ id:number, name:string, email:string }> = [
{ id:1, name:'john1', email:'john@gmail.com' },
{ id:2, name:'john2', email:'john2@gmail.com' }
];

  constructor() { }

 ngOnInit() {
}

}

users.component.html

<div class="col-md-4">
  <h4>Users List</h4>
  <ul class="list-group">
    <li class="list-group-item"
      *ngFor="let user of users">
      <a href="./users/{{user.id}}">{{user.name}}</a>
      <app-user [user]="user"></app-user> //error here
    </li>
  </ul>
 </div>
  <div class="col-md-8">
  <app-user-details></app-user-details>
  </div>
  <div class="col-md-8">
  <router-outlet></router-outlet>
  </div>

用户-details.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-user-details',
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.css']
})
export class UserDetailsComponent implements OnInit {
user : any;
@Input() users: Array<{ id:number, name:string, email:string }> = [
{ id:1, name:'john1', email:'john@gmail.com' },
{ id:2, name:'john2', email:'john2@gmail.com' }
];

constructor(private activatedRoute: ActivatedRoute) { }

 ngOnInit() {
  this.activatedRoute.params.subscribe((params) =>{ 
 this.user = this.users.filter((user) => {
 return user.id === +params.userId;

})[0];
  });
  this.activatedRoute.queryParams.subscribe((qs) => console.log('got the:', 
qs));
}


}

用户-details.component.html

 <p>
  user {{user.id}}
  email {{user.email }}
 </p>

路由

const appRoutes: Routes = [
{path: 'home', component: HomeComponent },
{path: 'blog', component: BlogComponent},
{path: 'str-dir', component: BuiltInStrDirComponent},
{path: 'attr-dir', component: BuiltInAttrDirComponent},
{path: 'directives', component: DirectiveHostComponent},
{path: 'users', component: UsersComponent, children:[
{path: ':id', component: UserDetailsComponent},
{path: '', component: PlaceholderComponent}

]},
{path: '**', redirectTo: '/home', pathMatch: 'full'},
{path: 'about', component: AboutComponent}

]

Angular 5无法绑定到用户，因为它不是app-user的已知属性

0 个答案: