时间戳

首页 > 解决方案 > Angular 中的切换按钮

javascript - Angular 中的切换按钮

问题描述

我正在使用 Angular 中的 github api 构建 github 搜索应用程序。我需要的是当我单击添加到收藏夹按钮时，添加到收藏夹按钮应该消失并且应该显示删除收藏夹按钮。我试图用活动类来做到这一点，但我是 Angular 的新手，我做不到。

页面图片

html:

  <input type="text" [(ngModel)]="profile" (ngModelChange)="detectChange($event)" (keyup)="findProfile()" class="input">

  <ng-template [ngIf]="profile !== '' && user">
    <div class="profileContainer">
      <div class="leftDetails">
        <img class="userAvatar" [src]="user.avatar_url" alt="User Avatar">
        <div>
          <button class="button" [routerLink]="['', user.login.toLowerCase(), user.id ]">View
            Profile</button>
          <button class="button" (click)="localStorage()" >Add to Favorite</button>
          <!-- <button class="button" (click)="removeLocal()" >Remove Favorite</button> -->
        </div>
        </div>

        <div class="rightDetails">
          <p><span>Username: </span>{{user.login}}</p>
          <p><span>Location:</span>{{user.location}}</p>
          <p><span>E-mail:</span>{{user.email}}</p>
          <p><span>Blog Link:</span>{{user.blog}}</p>
          <p><span>Member Since:</span>{{user.created_at}}</p>
        </div>
      
    </div>
  </ng-template>

  <div *ngIf="closeDiv">
    <div class="profileContainer" *ngFor="let item of display">
      <div class="leftDetails">
        <img class="userAvatar" [src]="item.avatar_url" alt="User Avatar">
        <div>
          <button class="button" [routerLink]="['', item.login.toLowerCase(), item.id ]">View Profile</button><br>
          <button class="button" (click)="removeLocal(item.id,item.storageKey)">Remove Favorite</button>
        </div>
      </div>

      <div class="rightDetails">
        <p><span>Username:</span>{{item.login}}</p>
        <p><span>Location:</span>{{item.location}}</p>
        <p><span>E-Mail:</span>{{item.email}}</p>
        <p><span>Blog Link:</span>{{item.blog}}</p>
        <p><span>Member Since:</span>{{item.created_at}}</p>
      </div>
    </div>
  </div>
</div>

<router-outlet></router-outlet>

ts：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  user: any;
  profile: any;
  display: any;
  local: any;
  randomNumber: any;
  randomString: any;
  idString: any;
  keys: any;
  closeDiv: boolean = true;
  isActive : boolean = true;
  constructor(private userData: HttpService) {}

  ngOnInit() {
    this.display = Object.values(localStorage).map((val: any) => JSON.parse(val));
    console.log(this.display);
  }

  public findProfile() {
    this.userData.updateProfile(this.profile);
    this.userData.getUser().subscribe((result) => {
      this.user = result;
    });
  }

  public localStorage() {
    this.randomNumber = Math.floor(Math.random() * 10000);
    this.randomString = this.randomNumber.toString();
    this.user.storageKey = this.randomString;
    localStorage.setItem(this.user.storageKey, JSON.stringify(this.user));
    this.display = Object.values(localStorage).map((val: any) => JSON.parse(val));
    console.log(this.display);
    console.log(this.user);
    console.log(this.user.storageKey);
  }

  public removeLocal(id: any, key: string) {
    for (let i = 0; i < this.display.length; i++) {
      if (this.display[i].id === id) {
        this.display.splice(i, 1);
        localStorage.removeItem(key); 
      }
    } 
    console.log(key);
  }

  public detectChange(ev: any) {
    ev.length > 0 ? (this.closeDiv = false) : (this.closeDiv = true);
  }

}

标签： javascriptangulartypescript

解决方案

您可以使用*ngIfAngular 中的指令有条件地切换按钮。

<button *ngIf='favoriteActive' class="button" (click)="*ngIf='favoriteActive' = false; localStorage()" >Add to Favorite</button>
<button *ngIf='!favoriteActive' class="button" (click)="favoriteActive' = true; removeLocal()" >Remove Favorite</button>

提示：不要使用方法名，localStorage因为它可能与 JS 中的默认 localStorage 冲突。

推荐阅读