Как передать данные из одного компонента в другой компонент, используя angular5 - PullRequest
0 голосов
/ 30 августа 2018

Я создаю тестовое приложение, используя угловой, так что мне нужно отображать данные пользователя, пока я нажимаю кнопку редактирования, затем эти данные пользователя необходимо будет отобразить в другом компоненте. Я написал запрос, чтобы получить данные пользователя при нажатии кнопки редактирования , но не в состоянии получить данные, поэтому точную процедуру изменений необходимо выполнить в запросе.

Это мой 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));
        }
        });
});

1 Ответ

0 голосов
/ 30 августа 2018

Я думаю, что было бы лучше установить в качестве входных данных пользователя, которого вы хотите отобразить в компоненте, получить нужного пользователя в вызове http и передать его компоненту после его ввода. Подробнее о вводе компонентов смотрите здесь: https://toddmotto.com/passing-data-angular-2-components-input

Чтобы получить данные по http-вызову, вы должны использовать Angulars Http Client, который действительно прост в использовании и избавляет от использования простого javascript. Смотрите здесь: https://blog.angular -university.io / angular-http /

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...