Question

[在此处输入图像描述] [1]这是代码。我点击其添加类到tr。但是，它向所有tr元素添加了打开列表类，但我只想将其添加到所选项目中。在这里，您可以看到什么结构：https://i.stack.imgur.com/alkXy.jpg

<tr *ngFor="let patient of mf.data let i = index" role="row" class="odd" [ngClass]="status ? 'open-list' : 'close-list'">
  <td class="sorting_1 p-name list-icon p-name" tabindex="0">
    <i (click)="status=!status" class="fas fa-angle-right arrow-right"></i>
    <a [routerLink]="['/app/patients/patient-detail/'+patient._id]">
      {{patient.first_name}} {{patient.last_name}}
    </a>
  </td>
</tr>

我有4个TS文件。

添加患者ts

import { Component, OnInit } from '@angular/core';
declare var $: any;
declare var jQuery: any;

@Component({
  selector: 'cat-page',
  templateUrl: './add-patient.html'
})

export class AddPatientPage implements OnInit {
  ngOnInit() {

  }
}

2。患者详细信息

import { Component, OnInit } from '@angular/core';
declare var $: any;
declare var jQuery: any;

@Component({
  selector: 'cat-page',
  templateUrl: './patient-detail.html'
})

export class PatientDetail implements OnInit {
  ngOnInit() {

  }

}

3。患者模块

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { Routes, RouterModule }  from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { AuthGuard } from '../../services/auth.guard';
import {TranslateModule} from "ng2-translate";
import {DataTableModule} from "angular2-datatable";

import { NgUploaderModule } from 'ngx-uploader'

import { SharedModule }   from '../../shared/shared.module'; 
import { Ng2AutoCompleteModule } from 'ng2-auto-complete';
//pages
import { PatientsPage } from './patients.page';
import { AddPatientPage } from './add-patient.page';
import { PatientDetail } from './patient-detail.page';

//components
import { PatientListComponent } from '../../components/patients/patient-list.component';
import { PatientAddFormComponent } from '../../components/patients/patient-addform.component';
import { PatientDetailComponent } from '../../components/patients/patient-detail.component';
// import { PatientDetailContentComponent } from '../../components/patients/patient-detail-content.component';
import { PatientInvoiceListComponent } from '../../components/patients/patient-invoice-list.component';
import { PatientPaymentListComponent } from '../../components/patients/patient-payment-list.component';
import { PatientAttachmentComponent } from '../../components/patients/patient-attachment-list.component';



export const routes: Routes = [
  { path: '', component: PatientsPage, canActivate: [AuthGuard] },
  { path: 'add', component: AddPatientPage, canActivate: [AuthGuard] },
  { path: 'add/:id', component: AddPatientPage, canActivate: [AuthGuard] },
  { path: 'patient-detail/:id', component: PatientDetailComponent, canActivate: [AuthGuard] }
];

@NgModule({
  imports: [
    TranslateModule,
    DataTableModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    SharedModule,
    NgUploaderModule,
    Ng2AutoCompleteModule 
  ],
  declarations: [
    PatientsPage,
    AddPatientPage,
    PatientDetail,
    PatientListComponent,
    PatientAddFormComponent,
    PatientDetailComponent,
    PatientInvoiceListComponent,
    PatientPaymentListComponent,
    PatientAttachmentComponent
  ],
  /*exports: [
    RouterModule,
    PatientsPage,
    AddPatientPage,
    PatientDetail,
    PatientListComponent,
    PatientAddFormComponent,
    PatientDetailComponent
  ],*/
  bootstrap: [ PatientListComponent,PatientAddFormComponent ]

})

export class PatientsModule { 


}

4。患者页面

import { Component, OnInit } from '@angular/core';
declare var $: any;
declare var jQuery: any;

var $ = require('jquery');

@Component({
  selector: 'cat-page',
  providers: [],
  templateUrl: './patients.html'
})

export class PatientsPage {

}

Answer 1

TS

// update array with one more field `isOpen` and use it in HTML for applying `class`

mf.data.map((obj) => {
    obj.isOpen = false;
    return obj;
});

HTML

<tr  *ngFor="let patient of mf.data let i = index" role="row" class="odd" [ngClass]="patient.isOpen ? 'open-list' : 'close-list'">
    <td class="sorting_1 p-name list-icon p-name" tabindex="0">
    <i (click)="patient.isOpen=!patient.isOpen" class="fas fa-angle-right arrow-right"></i>
        <a [routerLink]="['/app/patients/patient-detail/'+patient._id]">
            {{patient.first_name}} {{patient.last_name}}
        </a>
    </td>
</tr>

在click的{{1}}函数toggle值上

如何只在所有tr上不添加所选tr的类？我是Angular的新手

1 个答案: