Question

我正在尝试实现以下功能：单击该按钮后，该按钮将其从列表中隐藏，并从左侧的层次结构（TreeNode）中取消选择相应的复选框。

Rightside.component.html：

public class PlayerMovement : MonoBehaviour 
{
    public float speed = 6f;
    public float gravity = 9.8f;   
    public float JumpForce = 0.01f;
    public GameObject bullet;
    public CapsuleCollider col;
    public LayerMask groundLayers;

    private Rigidbody rb;
    private CharacterController _charCont;
    private Vector3 moveDirection = Vector3.zero;

    private void Start () 
    {
        _charCont = GetComponent<CharacterController>();
        col = GetComponent<CapsuleCollider>();
    }

    private void Update()
    {
        float deltaX = Input.GetAxis("Horizontal") * speed; // Get the inputs from 
        float deltaY = Input.GetAxis("Vertical") * speed;
        var Movement = new Vector3(deltaX, 0, deltaY);
        Movement     = Vector3.ClampMagnitude(Movement, speed); // clamps speed so movement is always the same
        Movement.y   = gravity;     // sets gravity on y axis

        Movement *= Time.deltaTime; // fixes the movement so that its the same across different frame rates.
        Movement  = transform.TransformDirection(Movement);
        _charCont.Move(Movement);

        if (_charCont.isGrounded) // I believe im getting the error somewhere among these lines
            moveDirection.y ? Input.GetKeyDown(KeyCode.Space) : 0;          
        else moveDirection.y -= gravity * Time.deltaTime;

        _charCont.Move(moveDirection);
    }
}

rightside.component.ts：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <ul class="selection-list">
    <li *ngFor="let item of getSelections()">
      <button class="btn" (click)="deselect(item)" *ngIf="item.selected">
        <i class="fa fa-close"> {{ item.displayName }} </i>
      </button> 
    </li>
  </ul>

productline.component.html：

import { Component, Input, OnInit, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
import { DataService } from '../../shared/service/data.service';
import { TreeNode } from '../../shared/dto/TreeNode';

import html from './rightside.component.html';
import css from './rightside.component.css';

@Component({
  selector: 'rightside-component',
  template: html,
  providers: [DataService],
  styles: [css],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class RightSideComponent implements OnInit {
  selections: string[];
  @Input() treeNode: TreeNode<string>[];

  constructor(private cd: ChangeDetectorRef) {}

  ngOnInit() {
  }

  getSelections() : TreeNode<string>[] {
    if (typeof(this.treeNode) == "undefined" || (this.treeNode) === null) {
      return [];
    }
    return this.treeNode;
  }

  deselect(item: TreeNode<string>): void {
    if((item.children) !== null) {
      item.children.forEach(element => {
        this.deselect(element);
      });
    }
    item.selected = false;
  }

}

Treenode.ts：

<p>Productlines</p>
<mat-input-container>
    <input #searchInput matInput placeholder="Search for Product Line">
</mat-input-container>
<div class="flex-container">
<div class="PLCheck" *ngIf="isDataLoaded">
    <fortune-select
       (dataChanged)="onDataChange($event)"
       [searchTerm]="searchInput.value"
       [currentNode]="tree"
       [singleSelect]="singleSelect"
       [collapsed]="true"></fortune-select>
</div>
<div class="sendToRight">
    <rightside-component
        [treeNode]="selectedProductLine">
    </rightside-component>
</div>
</div>

在rightside.component.html中，我有一些按钮，这些按钮基本上在右边列出了项目。我发现了这个类似的东西： http://next.plnkr.co/edit/1Fr83XHkY0bWd9IzOwuT?p=preview&utm_source=legacy&utm_medium=worker&utm_campaign=next&preview

我必须多次单击（在屏幕上其他位置或按钮本身上）才能隐藏它。如果我从底部的按钮开始并转到列表的顶部，则只需单击一下即可使用。出于某种原因，这些按钮无法单击。

我在控制台中看不到任何错误，我想知道是否可以采取任何措施来避免这种错误行为。我希望以任意顺序单击所有按钮都可以进行隐藏。

感谢您的帮助。

单击一次HTML按钮隐藏无法正常工作

0 个答案: