Question 348804 in Html Question posted in
Some basic documentation can be found here.

Html – Why my (click) event, that i wrote in a tr doesn't work?

I wrote this code, when I click on the row of the table (tr tag) it doesn’t do anything, I can’t understand why…

readDetails(){
    this.router.navigate(['/dettaglio-contributivo']);
    console.log("There it is")
  }

This is the method in the component.ts

<tr *ngFor="let item of tableData" (click)="readDetails()">
    <td class="text-start">{{item.enteImpositore}}</td>
    <td class="text-start">VIA MONS CECE</td>
    <td class="text-start">CIMITILE</td>
    <td class="text-start">{{item.tributo}}</td>
    <td class="text-end">{{item.identificativo}}</td>
    <td class="text-end">{{item.anno}}</td>
    <td class="text-end">{{item.ruolo}}</td>
    <td class="text-end">1.320</td>
    <td class="text-end">0,00</td>
    <td class="text-end">468,04</td>
    <td class="text-end">852,45</td>
</tr>

And this is the code in the component.html
Either the console.log doesn’t work

I tried to modify the method with something from chatGPT and other sites but nothing happen, also wrote the app-routing.module:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  {
    path: '',
    component: LayoutComponent,
    children: [
      { path: 'posizione-contributiva', component: PosizioneContributivaComponent },
      { path: 'dettaglio-contributivo/:id', component: DettaglioContributivoComponent}
    ]
  }
];
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It worked! It was my error 'cause, his:

    <tr *ngFor="let item of tableData" (click)="readDetails()">
    <td class="text-start">{{item.enteImpositore}}</td>
    <td class="text-start">VIA MONS CECE</td>
    <td class="text-start">CIMITILE</td>
    <td class="text-start">{{item.tributo}}</td>
    <td class="text-end">{{item.identificativo}}</td>
    <td class="text-end">{{item.anno}}</td>
    <td class="text-end">{{item.ruolo}}</td>
    <td class="text-end">1.320</td>
    <td class="text-end">0,00</td>
    <td class="text-end">468,04</td>
    <td class="text-end">852,45</td>
</tr>

    This wasn't write good because of the *ngFor so it wasn't displayed and I was clicking on other without the (click)...

    Sorry for waisting your time answering me but thank you all!


  2. 0

    So, if I understand, you are in a route /

    This route call the layout component.

    In this component:
    If you click on the attribute, you must launch the method ReadDetails()

    This method go to an other route : /detagglio-contributivo/
    and display a log.

    But if I read your main routing file, there are no routes like this. The only route for this url is with the :id
    you must declare it on your method.

    And for the console.log, I’m not sûre but I think the best is to declare before the navigate

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search