Question

我试图在页面加载下面的屏幕截图中实现这一点我希望能够选择所有系统生成的标题，因此将背景设置为绿色。我能够做到这一点。但是当选择更改时，例如当选择当前标题时，我希望背景颜色随选择而变化。我在完成这个问题时遇到了问题。

以下是此背后的代码。

<table style="width:100%">
   <thead>
        <tr>
            <th>Associate Format</th>
            <th>Addressee</th>
            <th>Contact Name</th>
            <th>Current Heading</th>
            <th>System Generated Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let assoc of this.assocService.associateArray; let idx = index" [attr.name]="idx">
            <!--<td style="display:none;">
                {{assoc.assocType}}
            </td>-->
            <td>
                {{assoc.assocTypeName}}
            </td>
            <td>
                {{assoc.addressee}}
            </td>
            <td>
                {{assoc.contactname}}
            </td>
            <td [ngClass]="this.tdindex == idx && this.tdh1Selected || this.heading1Selected ? 'backgroundGreen' : 'backgroundGrey'" [attr.name]="idx"  >
                <input type="radio"  [attr.name]="idx" (change)="onHeading1Select($event,assoc,idx)"  [checked]="this.heading1Selected"  value="{{assoc.heading}}"/>  {{assoc.heading}} 
            </td>
            <td [ngClass]="this.tdindex == idx && thistdh2Selected || this.heading2Selected? 'backgroundGreen' : 'backgroundGrey'"  [attr.name]="idx">
                <input type="radio"  [attr.name]="idx" (change)="onHeading2Select($event,assoc,idx)" [checked]="this.heading2Selected"  value="{{assoc.systemHeading}}"/> {{assoc.systemHeading}}
            </td>
        </tr>
    </tbody>
</table>

在背后的代码中

heading1Selected: boolean = false;
    heading2Selected: boolean = false;

    tdh1Selected: boolean = false;
    tdh2Selected: boolean = false;
    tdindex: number;

 onHeading1Select(event,assoc:any, index: any) {
        debugger;
        let assocObj = assoc;
        for (let a of this.assocService.associateArray) {
            if (a.contactId == assocObj.contactId) {
                a.selectedHeading = assocObj.heading;
                this.tdindex = index;
                this.tdh1Selected = true;
                this.tdh2Selected = false;
                this.heading2Selected = false;
            }
        }

        this.caseSvc.inMemoryCase.associates = this.assocService.associateArray;
    }

    onHeading2Select(event,assoc:any, index: any) {
        debugger;
        let assocObj = assoc;
        let sysHeading: string = assocObj.systemHeading;
        for (let a of this.assocService.associateArray) {
            if (a.contactId == assocObj.contactId) {
                if (sysHeading.includes('cannot') || sysHeading.includes('CANNOT'))
                {
                    a.selectedHeading = assocObj.heading;

                }
                else {
                    a.selectedHeading = assocObj.systemHeading;
                    this.tdindex = index;
                    this.tdh2Selected = true;
                    this.tdh1Selected = false;
                    this.heading1Selected = false;
                }

            }
        }

    }

我知道我在解决这个问题上非常接近，但缺乏某些东西......任何人都可以指出任何时间来节省我的时间

Answer 1

更改条件如下

<td [ngClass]="assoc.tdindex == idx && (assoc.tdh1Selected || assoc.heading1Selected) ? 'backgroundGreen' : 'backgroundGrey'" [attr.name]="idx"  >
    <input type="radio"  [attr.name]="idx" (change)="onHeading1Select($event,assoc,idx)"  [checked]="assoc.heading1Selected"  value="{{assoc.heading}}"/>  {{assoc.heading}} 
</td>
<td [ngClass]="assoc.tdindex == idx && (assoc.tdh2Selected || assoc.heading2Selected)? 'backgroundGreen' : 'backgroundGrey'"  [attr.name]="idx">
    <input type="radio"  [attr.name]="idx" (change)="onHeading2Select($event,assoc,idx)" [checked]="assoc.heading2Selected"  value="{{assoc.systemHeading}}"/> {{assoc.systemHeading}}
</td>

并且在函数内使用assoc代替this

assoc.tdindex = index;
assoc.tdh1Selected = true;
assoc.tdh2Selected = false;
assoc.heading2Selected = false;

Demo

注意：这样可以解决问题，但您的代码还有很多其他问题。

更改角度2打字稿中包含radiobutton的td的背景

1 个答案: