为何添加<ng-container>后mat-slide-toggle动画失效？

问题现象 #

我正在学习Angular与Material UI，已实现一个功能基本正常的卡片组件，但<mat-slide-toggle>的切换动画无法正常工作：

• 切换器的状态值（checked）能正确变化
• 仅当注释掉<ng-container>内的所有内容时，切换动画才会生效
• 开关图标无过渡动画，但Enabled: {{checked}}的文本会同步更新

代码示例 #

reverse-text.component.ts #

import { Component } from '@angular/core';
import { MatCardModule } from '@angular/material/card'
import { MatSlideToggleModule } from '@angular/material/slide-toggle'
import { FormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button'
import { MatIconModule } from '@angular/material/icon'

@Component({
  selector: 'app-reverse-text',
  standalone: true,
  imports: [
    MatCardModule,
    MatSlideToggleModule,
    FormsModule,
    MatFormFieldModule,
    CommonModule,
    MatButtonModule,
    MatIconModule,
  ],
  templateUrl: './reverse-text.component.html',
  styleUrl: './reverse-text.component.css'
})
export class ReverseTextComponent {
  title = "Reverse Text"
  checked: boolean = false;
  textinput: string = "";
  reversedText = "";

  reverseText(unmixed: string) {
    var splitstring = unmixed.split("")
    var mixed = splitstring.reverse();
    var unmixed = mixed.join("");
    this.reversedText = unmixed;
  }
}

reverse-text.component.html #

<mat-card>
    <mat-card-content>
        Reverse Text
        <mat-slide-toggle class="example-margin" [checked]="checked" 
        (change)="checked = !checked">
                Enabled: {{checked}}
            </mat-slide-toggle>
    </mat-card-content>

    <ng-container *ngIf="checked">
        <mat-form-field>
            <textarea matInput placeholder="Enter text" #premixedtext></textarea>
        </mat-form-field>
        <p class="output">
            {{reversedText}}
        </p>
        <button mat-raised-button (click)="reverseText(premixedtext.value)">
            Reverse Text
        </button>
    </ng-container>
</mat-card>

需求与尝试 #

我需要<mat-slide-toggle>的动画正常显示，同时保持它对<ng-container>内容的显示/隐藏控制。目前切换器能正确控制内容，但动画失效。试过调整事件处理逻辑，查阅MatSlideToggle官方文档，确认移除<ng-container>后动画正常，但这不符合需求。

解决方法 #

方案1：改用双向数据绑定（推荐） #

问题根源在于手动在(change)事件中直接修改checked值，打乱了Angular变更检测与Material动画的执行顺序。改用双向绑定可让框架按正确流程处理状态变更与动画触发：

修改HTML中的<mat-slide-toggle>：

<mat-slide-toggle class="example-margin" [(ngModel)]="checked">
    Enabled: {{checked}}
</mat-slide-toggle>

组件已导入FormsModule，无需额外配置即可使用双向绑定。

方案2：替换ng-container为<div> #

若双向绑定仍不生效，可将ng-container替换为<div>标签：

<div *ngIf="checked">
    <mat-form-field>
        <textarea matInput placeholder="Enter text" #premixedtext></textarea>
    </mat-form-field>
    <p class="output">
        {{reversedText}}
    </p>
    <button mat-raised-button (click)="reverseText(premixedtext.value)">
        Reverse Text
    </button>
</div>

ng-container作为虚拟容器，其DOM操作时机可能干扰Material组件的动画检测，替换为实际DOM元素可避免此类问题。

原理说明 #

手动修改checked值会导致：Material动画尚未启动，状态已被更新；同时ng-container内DOM的添加/移除触发变更检测，直接打断动画执行流程。双向绑定让Angular协调状态变更、动画触发与DOM更新的顺序，确保动画完整执行。

内容的提问来源于stack exchange，提问作者Benjamin Crouch