Angular ngFor点击图标仅切换对应输入框文本可见性问题排查

你的核心问题在于用单个布尔值hide和独立的clickedIndex无法为每个密钥项单独控制可见性，且当前代码存在语法错误和逻辑错误，导致状态无法正确切换。以下是修复后的完整代码：

修改后的 key.component.ts #

// 用对象存储每个索引的隐藏状态，默认所有密钥隐藏（设为true）
hideStates: {[index: number]: boolean} = {};

// 组件初始化时，给每个密钥项设置默认隐藏状态
ngOnInit(): void {
  this.keyCopies.forEach((_, index) => {
    this.hideStates[index] = true;
  });
}

修改后的 key.component.html #

<!-- 注意ngFor里的分隔符是分号，不是逗号 -->
<div class="key-wrapper mt-5" *ngFor="let key of keyCopies; let i = index">
    <div class="key-card mb-4">
        <div class="left-col">
            <mat-form-field>
                <!-- 修正value绑定为当前循环的key.token，而非token.token -->
                <input matInput [readonly]="true" 
                       [type]="hideStates[i] ? 'password' : 'text'"
                       value="{{key.token}}">
                <!-- 点击时切换当前索引的隐藏状态 -->
                <mat-icon matSuffix (click)="hideStates[i] = !hideStates[i]">
                    <!-- 根据当前索引的状态显示对应图标 -->
                    {{hideStates[i] ? 'visibility_off' : 'visibility'}}
                </mat-icon>
            </mat-form-field>
        </div>
        <div class="right-col">
            <div><span>{{key.createdAt}}</span></div>
            <div>
                <button class="btn-red" (click)="deleteUserKey(key._id)">
                    <mat-icon>delete</mat-icon>
                </button>
            </div>
        </div>
    </div>
</div>

关键修改点说明 #

• 废弃单个hide和clickedIndex：改用hideStates对象为每个索引独立维护隐藏状态，避免所有项共享同一个状态。
• 修正ngFor语法：Angular的*ngFor中变量分隔符必须是分号（;），而非逗号（,），否则循环会出错。
• 绑定当前项的token：原代码中value="{{token.token}}"应该是value="{{key.token}}"，否则所有输入框都会显示同一个token值。
• 直接切换当前索引状态：点击图标时直接翻转hideStates[i]的值，无需额外判断索引，逻辑更简洁直接。

内容的提问来源于stack exchange，提问作者A.Mac