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%;
}

下图演示

打开对话框

Select 第三场

按下一次（正确移动数据并正确突出显示）

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

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

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%;
}

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

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

Angular 4 | Material 2 - Highlight of button toggle group not changing correctly Programatically

javascript

css

typescript

angular-material2

angular