Question

我正在使用angular创建测试应用程序，因此我需要在单击编辑按钮时显示用户详细信息，然后该用户详细信息将需要显示在另一个组件中。我编写了查询以在单击编辑按钮的同时获取用户详细信息，但无法获取数据，因此需要在查询中进行更改的确切过程是什么。

这是我的manageusers.component.html

<tr *ngFor="let detail of userDetails" style="text-align:center">
      <td><input type="checkbox"></td>
    <td>{{detail.username}}</td>
    <td>{{detail.uemail}}</td>
    <td>Inactive</td>
    <td>{{detail.added_on}}</td>
    <td>
        <a routerLink="/dashboard-info/basic-settings"> 
  <i class="fas fa-edit" (click)="editIssue(i,detail._id)"></i>
</a>

这是我的manageusers.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup , Validators } from '@angular/forms';
import { DataService } from '../../../services/data.service';
import { AccountService } from '../../../services/account.service';
import { Router } from '@angular/router';

@Component({
selector: 'app-manage-users',
templateUrl: './manage-users.component.html',
styleUrls: ['./manage-users.component.css'],
})
export class ManageUsersComponent implements OnInit {

userDetails:any = [];

detail:Detail={
  added_on:'',
  username:'',
  uemail:'',
  upassword:'',  
};
constructor(private router: Router,private fb:FormBuilder,private dataService: DataService, private accountService: AccountService) {}

editIssue(id,detail){
  alert(detail);
  let data = {
    _id:detail,
        };
  this.accountService.editDetail(data).subscribe(
    response => {
    console.log(response);
    this.userDetails = JSON.parse(response);
    //this.router.navigate(['/dashboard-info/basic-settings', this.userDetails]);
},
    err => {
    console.error('User Not found');
    })   
}

ngOnInit() {}
}

interface Detail{
  added_on:string
  username:string,
  upassword:string,
  uemail:string,
}

accountService.ts

editDetail(data) {//Getting User with userId
  return this.http.post(this.apiPath + 'user/editDetail', data,{responseType: 'text'});
}

usercontroller.js

userRouter.post('/editDetail', function (req, res) {
    console.log(req.body._id);

    Collections.user.findOne({_id: req.body._id}, function (err, result) {
        if (err) return res.status(500).send("There was a problem finding the user");
        if (result) {
            console.log(result);
        res.status(200).send(result);
        } else {
            return res.status(500).send("User Not Found with Details: " + JSON.stringify(user));
        }
        });
});

Answer 1

我认为最好将要在组件中显示的用户设置为输入，在http调用中获取所需的用户，然后通过输入将其传递给组件。在此处查看有关组件输入的更多信息：https://toddmotto.com/passing-data-angular-2-components-input

要通过http调用检索数据，您应该使用Angulars Http Client，它非常易于使用，并且可以避免使用普通javascript。看到这里：https://blog.angular-university.io/angular-http/

如何使用angular5将数据从一个组件传递到另一组件

1 个答案: