Question

您好我尝试了一个示例，例如通过自定义组件将数据从父级传递到子级和子级到父级。

以下是我用过的文件。我附上了父和子组件的html和ts文件。

每个员工都有一个叫做选择记录的按钮。点击按钮整行应该突出显示。

     Parent component (app.component.ts)

    import { Component } from '@angular/core';

    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        title = 'app';

    public employeeRecord: any = [
    {eId: 1, eName: "sachin", eCity: "Mumbai", eSalary: 8000},
    {eId: 2, eName: "Yuvi", eCity: "Panjab", eSalary: 9000},
    {eId: 3, eName: "Dhoni", eCity: "Ranchi", eSalary: 800},
    {eId: 4, eName: "Dravid", eCity: "Bangalore", eSalary: 8000},
    {eId: 5, eName: "Anil", eCity: "Delhi", eSalary: 2000}
];
selectedRecordData: any = {
    selectedEmplyoeeName: "",
    selectedEmplyoeeCity: "",
    selectedEmplyoeeSalary: ""
};
getSelectedRecord(data) {
    this.selectedRecordData = data;
}
}

Parent Component html (app.component.html)

    <h1>Employee Record List</h1>


      <h1>Selected Employee</h1>
       <h3>Id : {{selectedRecordData.selectedEmplyoeeId}}</h3>
       <h3>Name : {{selectedRecordData.selectedEmplyoeeName}}</h3>
       <h3>City : {{selectedRecordData.selectedEmplyoeeCity}}</h3>
       <h3>Salary : {{selectedRecordData.selectedEmplyoeeSalary}}</h3>

     <app-custom-component 
    [id] = "employee.eId" 
    [name] = "employee.eName"
    [city] = "employee.eCity"
    [salary] = "employee.eSalary"
     (sendRecord) = "getSelectedRecord($event)"
    *ngFor="let employee of employeeRecord;">
     </app-custom-component>

custom-component (Custom-component.ts).
   import { Component, OnInit, Input, Output, EventEmitter } from 
     '@angular/core';

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

constructor() { }

ngOnInit() {
}
isSelect: false;    
@Input('id') employeeId: number;
@Input('name') employeeName: string;
@Input('city') employeeCity: string;
@Input('salary') employeeSalary: number;

@Output() sendRecord: EventEmitter<any> = new EventEmitter();

public selectedRecord(event) {
    let selectedEmplyoeeRecordDetails: any = {
        selectedEmplyoeeId: this.employeeId,
        selectedEmplyoeeName: this.employeeName,
        selectedEmplyoeeCity: this.employeeCity,
        selectedEmplyoeeSalary: this.employeeSalary,
    };
    this.sendRecord.emit(selectedEmplyoeeRecordDetails);
      isSelect = true;
     }
   }



 **Custom component (custom.component.html)**
<div [ngClass]="{'highlight': isSelect}">
<h3>Id : {{employeeId}}</h3>
<h3>Name : {{employeeName}}</h3>
<h3>City : {{employeeCity}}</h3>
<h3>Salary : {{employeeSalary}}</h3>
<button (click)= "selectedRecord(event)">SelectRecord</button>

Answer 1

您可以添加一个css类，说“突出显示”，并仅在所选员工与组件员工匹配时应用它。因此，通过修改，您的自定义组件应如下所示：

<强> 定制component.ts

export class CustomComponentComponent implements OnInit {

@Input('selected') isSelected:boolean;
@Input('name') employeeName: string;
@Input('city') employeeCity: string;
@Input('salary') employeeSalary: number;

@Output() sendRecord: EventEmitter<any> = new EventEmitter();
count: number = 0;
public selectedRecord(event) {
    let selectedEmplyoeeRecordDetails: any = {
        selectedEmplyoeeName: this.employeeName,
        selectedEmplyoeeCity: this.employeeCity,
        selectedEmplyoeeSalary: this.employeeSalary,
};
this.sendRecord.emit(selectedEmplyoeeRecordDetails);
}

}

<强> 定制component.html

<div [ngClass]="{'highlight': isSelected}">
 <h3>Name : {{employeeName}}</h3>
 <h3>City : {{employeeCity}}</h3>
 <h3>Salary : {{employeeSalary}}</h3>
 <button (click)= "selectedRecord(event)" >SelectRecord</button>
 </div>
<hr>

最后 app.component.html

<h1>Employee Record List</h1>

<hr>

    <h1>Selected Employee</h1>
    <h3>Name : {{selectedRecordData.selectedEmplyoeeName}}</h3>
    <h3>City : {{selectedRecordData.selectedEmplyoeeCity}}</h3>
    <h3>Salary : {{selectedRecordData.selectedEmplyoeeSalary}}</h3>
    <hr>
    <app-custom-component 
    [name] = "employee.eName"
    [selected]= "selectedRecordData.id === employee.id"
    [city] = "employee.eCity"
    [salary] = "employee.eSalary"
    (sendRecord) = "getSelectedRecord($event)"
    *ngFor="let employee of employeeRecord;">
    </app-custom-component>

我添加了一个额外的属性id作为唯一标识符。

如何在角度js 4中突出显示所选行

1 个答案: