小编Har*_*rry的帖子

Angular - 仅在单击的行上启用按钮

我有一张表,上面有一些细节。我的问题是在其中一栏中我有按钮。例如,我单击了第 0 行的按钮,但所有按钮都已启用。有谁知道我该如何解决这个问题?

已经尝试通过行号,但至今未成功:(

HTML

 <div *dxTemplate="let data of 'cellTemplate'">
      <button type="button" data-toggle="dropdown" class="btn ClassPlay">
        <img src="./assets/play.svg" *ngIf="currentState=='pause'">
        <img src="./assets/playV.svg" *ngIf="currentState=='start'">
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active"
          (click)="currentState='start'; startTimer(data, data.rowIndex)">Start</a>
        <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active"
          (click)="currentState='pause'; pauseTimer((data, data.rowIndex)">Pause</a>
      </div>
      <span class="timer">{{display}}</span>
    </div>
Run Code Online (Sandbox Code Playgroud)

组件.ts

startTimer(data,row) {
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display=this.transform( this.time)
    }, 1000);
  }

      transform(value: number): string {
      var sec_num = value; 
    var hours   = Math.floor(sec_num / 3600); …
Run Code Online (Sandbox Code Playgroud)

typescript angular

5
推荐指数
1
解决办法
98
查看次数

角计时器来计算时间

我正在尝试创建一个计时器来从 0 开始计算时间。

但是,当我单击按钮时,时间不计算在内,有谁知道为什么?

如何以这种格式获取此计时器 {{hours}}: {{mminutes}}: {{sseconds}}?

谢谢!

我的代码

闪电战

组件.ts

time: number = 0;
interval;

startTimer() {
    this.interval = setInterval(() => {
        if(this.time = 0) {
            this.time++;
        } else {
            this.time= 0;
        }
    },1000)
}

pauseTimer() {
    clearInterval(this.interval);
}
Run Code Online (Sandbox Code Playgroud)

typescript angular

2
推荐指数
1
解决办法
5667
查看次数

Angular Autocomplete - 选择元素时从列表中删除元素

我正在尝试开发一个自动完成。我的问题是我无法从列表中删除被选中的元素。

图片说明了我的问题

图片

我选择了一个名称,然后选择了相同的连续名称 n 下拉列表 :( 当它被选中时它应该“消失”

我的代码——Stackblitz

斯塔比尔茨

成分

constructor(private userService: UserService) {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  ngOnInit() {
    this.userService.getUsers().subscribe(
      (val: any[]) =>{
        this.allFruits = val.map(user => user.username);
        this.fruitCtrl.setValue(null); 
      } 
    )
  }

  remove(fruit: string): void {
    const index = this.fruits.indexOf(fruit);

    if (index >= 0) {
      this.fruits.splice(index, 1);
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase(); …
Run Code Online (Sandbox Code Playgroud)

autocomplete typescript angular

2
推荐指数
1
解决办法
1896
查看次数

Angular - 按钮滚动到顶部

我开发了一个图片库。有没有办法在页面上滚动时,会出现一个按钮,当单击它时,所有滚动都会到顶部(页面开头)?

我已经测试了一些我发现的案例,但到目前为止没有一个起作用:(有人可以帮助我吗?

闪电战

代码

  <ul class="mdc-image-list my-image-list" style="padding-left: 10px;padding-right: 10px;">
    <li class="mdc-image-list__item" *ngFor="let product of Images; let  j = index;">
      <div class="mdc-image-list__image-aspect-container">
          <img [src]="product.image" class="mdc-image-list__image">
      </div>
    </li>
  </ul>
Run Code Online (Sandbox Code Playgroud)

scroll scrolltop typescript angular

2
推荐指数
1
解决办法
1万
查看次数

函数在 ngOnInit 中只传递一次

我开发了一项服务,允许我激活按钮并查看其在不同组件中的状态。当我单击开始/暂停时,按钮会更改图像。

在 StackBlitz 中,代码运行良好,但是当我在我的项目中实现它时,该函数只传入一次ngOnInit并且不再加载,不再更改组件之间的按钮图像。

有没有办法实现这个但不使用ngOnInit

我用过setinterval,按钮改变了图像,但它似乎不是最好的解决方案。

谁能帮我?

闪电战

问题 --- 关于组件

currentState: string;
ngOnInit() {
    this.currentState = this.servicesService.getCurrentState();
}
Run Code Online (Sandbox Code Playgroud)

html

<div class="container" style="margin-top: 10%">
    <div class="btn-group" dropdown>
        <button id="button-basic" dropdownToggle type="button" class="btn ">
            <img style="width: 35px;" *ngIf="currentState=='pause'" src="https://img.icons8.com/carbon-copy/100/000000/play-button-circled.png">
            <img style="width: 35px;" *ngIf="currentState=='start'" src="https://img.icons8.com/cute-clipart/64/000000/stop-squared.png">
        </button>
        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
            <li role="menuitem">
              <a class="dropdown-item" *ngIf="currentState=='pause'" routerLinkActive="active" (click)="startTimer()">Start</a>
            </li>
            <li role="menuitem">
              <a class="dropdown-item" *ngIf="currentState=='start'" routerLinkActive="active" (click)="pauseTimer()">Stop</a>
            </li>
        </ul>
        <div>
            <span>{{servicesService.fetchDisplay()}}</span>
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

成分

 startTimer() …
Run Code Online (Sandbox Code Playgroud)

typescript angular

0
推荐指数
1
解决办法
94
查看次数

标签 统计

angular ×5

typescript ×5

autocomplete ×1

scroll ×1

scrolltop ×1