javascript - Angular 4 | Material 2 - 按钮切换组的突出显示未以编程方式正确更改

Question

我遇到了一个问题，我能够重新排序网格列表，而在实际数据移动方面没有问题，但是按钮切换的突出显示与正在切换的数据不匹配，它落后于数据正在移动，我似乎无法解决这个问题。

下面是源文件和图片演示。

TS

 @Component({
    selector: 'sort-fields-dialog',
    templateUrl: './sort.fields.dialog.component.html',
    styleUrls: ['./sort.fields.dialog.component.css']
})
export class OrderFieldsDialog {
    fieldsTable: any[];
    buttonToggleValue: number; 
    showButtonToggleGroup: boolean = true;

    constructor(
        public dialogRef: MdDialogRef<OrderFieldsDialog>,
        private snackBar: MdSnackBar
    ) { }

    // fucntion called when selecting a button toggle
    onSelect(index: number): void {
        this.buttonToggleValue = index;
        console.log(index);
    }

    // function to move a field up
    moveFieldUp(): void {
        if (this.buttonToggleValue > 1) {
            this.showButtonToggleGroup = false;
            var temp = this.fieldsTable[this.buttonToggleValue];
            this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue - 1];
            this.fieldsTable[this.buttonToggleValue - 1] = temp;
            this.buttonToggleValue--;
            this.showButtonToggleGroup = true;
        }
        else {
            this.openSnackBar("You can not move the top item up.");
        }
    }

    // function to move a field down
    moveFieldDown(): void {
        if (this.buttonToggleValue < (this.fieldsTable.length - 1)) {
            this.showButtonToggleGroup = false;
            var temp = this.fieldsTable[this.buttonToggleValue];
            this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue + 1];
            this.fieldsTable[this.buttonToggleValue + 1] = temp;
            this.buttonToggleValue++;
            this.showButtonToggleGroup = true;
        }
        else {
            this.openSnackBar("You can not move the bottom item down.");
        }
    }

    // opens a bottom snackbar
    openSnackBar(message: string) {
        this.snackBar.open(message, "Close", { duration: 975 });
    }
}

HTML

  <div class="dialog-box" align="center">
    <h1 md-dialog-title>Order Fields</h1>
    <div class="pull-right">
        <md-icon (click)="moveFieldUp()" class="order-button hover-theme-primary">expand_less</md-icon>
        <br />
        <md-icon (click)="moveFieldDown()" class="order-button move-field-down hover-theme-primary">expand_more</md-icon>
    </div>

    <md-button-toggle-group id="buttonToggleValue" *ngIf="showButtonToggleGroup" [vertical]="true">
        <ng-container *ngFor="let field of fieldsTable; let i = index">
            <md-button-toggle class="toggle-button" id="button-toggle-{{i}}" (click)="onSelect(i)" *ngIf="!field.IsKey" value={{i}}>
                {{field.Name}} 
            </md-button-toggle>
        </ng-container>
    </md-button-toggle-group>

    <md-dialog-actions align="center">
        <button md-raised-button (click)="dialogRef.close('Cancel')">Close</button>
    </md-dialog-actions>
</div>

CSS

  .dialog-box {
    font-family: Roboto, Arial, sans-serif;
    display: inline-block;
}

.toggle-button {
    width: 100%;
    min-width: 300px;
}

.order-button {
    cursor: pointer;
    margin-top: -22%;
    font-size: 175%;
}

button:nth-child(2) {
    margin-left: 15px;
}

.move-field-down {
    margin-top: 25%;
}

下方图片演示

打开对话框

选择字段三

按下一次(正确移动数据并正确突出显示)

按一次向上键(现在它显示了问题，数据移动正确，但是当向上移动字段时，它会保持在顶部移动的那个突出显示，但也会突出显示它下面的任何内容)

如果您能帮助解决这个问题，我们将不胜感激。我对为什么会发生这种情况感到茫然，真的需要帮助。

Answer 1

我终于明白了。

使用非常短的 setTimeout 函数(不是 Promise)我能够让它工作。

TS:

@Component({
    selector: 'sort-fields-dialog',
    templateUrl: './sort.fields.dialog.component.html',
    styleUrls: ['./sort.fields.dialog.component.css']
})
export class OrderFieldsDialog {
    fieldsTable: any[];
    buttonToggleValue: number; 
    showButtonToggleGroup: boolean = true;

    constructor(
        public dialogRef: MdDialogRef<OrderFieldsDialog>,
        private snackBar: MdSnackBar
    ) { }

    // fucntion called when selecting a button toggle
    onSelect(index: number): void {
        this.buttonToggleValue = index;
    }

    // function to move a field up 
    moveFieldUp(): void {
        let self = this;
        if (this.buttonToggleValue > 1) {
            this.showButtonToggleGroup = false;
            var temp = this.fieldsTable[this.buttonToggleValue];
            this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue - 1];
            this.fieldsTable[this.buttonToggleValue - 1] = temp;
            this.buttonToggleValue--;
            this.showButtonToggleGroup = true;
            setTimeout(function () {
                // this function removes a bug with highlighting of the button toggles
                // the delay is necessary don't remove
                var temp = "button-toggle-" + (self.buttonToggleValue + 1);
                document.getElementById(temp).setAttribute("class", "toggle-button mat-button-toggle");
            }, 5);
        }
        else {
            this.openSnackBar("You can not move the top item up.");
        }
    }

    // function to move a field down
    moveFieldDown(): void {
        if (this.buttonToggleValue < (this.fieldsTable.length - 1)) {
            this.showButtonToggleGroup = false;
            var temp = this.fieldsTable[this.buttonToggleValue];
            this.fieldsTable[this.buttonToggleValue] = this.fieldsTable[this.buttonToggleValue + 1];
            this.fieldsTable[this.buttonToggleValue + 1] = temp;
            this.buttonToggleValue++;
            this.showButtonToggleGroup = true;
        }
        else {
            this.openSnackBar("You can not move the bottom item down.");
        }
    }

    // opens a bottom snackbar
    openSnackBar(message: string) {
        this.snackBar.open(message, "Close", { duration: 975 });
    }
}

HTML:

<div class="dialog-box" align="center">
    <h1 md-dialog-title>Order Fields</h1>
    <div class="pull-right">
        <md-icon (click)="moveFieldUp()" class="order-button hover-theme-primary">expand_less</md-icon>
        <br />
        <md-icon (click)="moveFieldDown()" class="order-button move-field-down hover-theme-primary">expand_more</md-icon>
    </div>

    <md-button-toggle-group *ngIf="showButtonToggleGroup" [vertical]="true">
        <ng-container *ngFor="let field of fieldsTable; let i = index">
            <md-button-toggle class="toggle-button" id="button-toggle-{{i}}" (click)="onSelect(i)" *ngIf="!field.IsKey" value={{i}}>
                {{field.Name}} 
            </md-button-toggle>
        </ng-container>
    </md-button-toggle-group>

    <md-dialog-actions align="center">
        <button md-raised-button (click)="dialogRef.close('Cancel')">Close</button>
    </md-dialog-actions>
</div>

CSS:

.dialog-box {
    font-family: Roboto, Arial, sans-serif;
    display: inline-block;
}

.toggle-button {
    width: 100%;
    min-width: 300px;
}

.order-button {
    cursor: pointer;
    margin-top: -22%;
    font-size: 175%;
}

.move-field-down {
    margin-top: 25%;
}

我仍然不明白为什么我首先将向上移动字段功能导致它有两个被选中，但这个变通方法就足够了。