2

I am note sure if it is possible but here's what I am trying to do:

I would like to fill empty templates depending from the td clicked, for exemple if you clicked on <td *ngFor="let user of userService.user | async">{{user.data.server1}}</td> then you move to the server1.component.ts details page witch contains the server1 Json object details

==> I found things with requestOptions.params thats an idea ..so it's like the datas are fetch by a get request comming from the Json and returning the datas according to the selected row from the tab

Same idea as in php when you do something like this: <?php echo $_GET['link'];

In 1 row = 1 Json object = 1 page (parent with tab and child displaying details from each row)

In other word each clicked row of the tab will be a page displaying plenty details about the choosen Json object (charts, %indicators,)

NOTE :  I don't want to code plenty plenty child components for each row, I would like just one child component filling by the different object Json different in each row...

I think using that method it could works maybe How to pass url arguments (query string) to a HTTP request on Angular 2

My request is also a bit similar to that question, I am actually trying to adapt that code : Angular http service clear RequestOptions search parameters

Not sure if the routerLink is needed maybe everything is possible with the correct http service configuration

If anyone got an idea? Thanks in advance...

json:

user {
{ data 
  }, {
server1 {
 "id": 1,
 "name": "Leanne Graham",
 "username": "Bret",
 "email": "[email protected]",
 "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
    "lat": "-37.3159",
    "lng": "81.1496"
  }
   },
   server2 {
  "id": 1,
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "[email protected]",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 556",
    "city": "Gwenborough",
    "zipcode": "92998-3874",
    "geo": {
    "lat": "-37.3159",
    "lng": "81.1496"
  }
   },
 }
}

tab.html:

<table>
<tr routerLink=""/my-Server1>
   <td *ngFor="let user of userService.user | async">{{user.data.server1}}</td>
</tr>
</table>

service.ts:

@Injectable()
export class UserService {
  users: Observable<User[]>;
    constructor (public http: Http) {
          const tick$ = Observable.timer(100, 60000);

          this.users = tick$.flatMap(() => http.get(usersURL)).map(res => [res.json()]).publishBehavior(<User[]>[]).refCount();
 }
}

server1.html :

<div ngFor=""let user of userService.user | async"">{{server1.app.id}}
</div>
<div ngFor=""let user of userService.user | async"">{{server1.tol.name}}</div>

<p ngFor="let user of userService.user | async">{{server1.book.51}}</p>

..note there's plenty other things in the server1.html template and plenty other tr in the tab.html

10
  • it hard to figure out what are you after can you throw some more light on the same ? Commented Aug 17, 2017 at 12:24
  • @RahulSingh I updated my post Commented Aug 17, 2017 at 12:43
  • do you want to display each row of table in greater detail in the server 1 .html Commented Aug 17, 2017 at 12:45
  • @RahulSingh yes something like this.. in fact each row of table will be an app or a service and when you clicked you will have plenty details about the choosen row (charts, %indicators,) returning from an Json Commented Aug 17, 2017 at 12:50
  • so what's stopping you on this ? Commented Aug 17, 2017 at 12:52

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.