Question

我想要并且仍然希望这样做，以便当您从列表中单击一个项目时，该按钮将被解锁，并且以某种方式将所选项目突出显示为彩色。这是我的工件不起作用（告诉我如何执行此操作。

html：

<div class="card">
  <div class="row">
    <div class="card-content table-responsive ">
      <div class="col-md-12">
        <a (click)="SelectedPost(post?.post_id)">
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Name</th>
              </tr>
            </thead>
            <tbody>
              <tr  *ngFor="let post of posts">
                <td>{{post.name}} </td>
              </tr>
            </tbody>
          </table>
        </a>
      </div>
      <div class="col-md-12">
      <button type="submit" [disabled]="!selectedPost" class="btn btn-info pull-right">Ok</button>
  </div>
</div>

ts：

...
export class PostComponent  implements ModalComponent<any> {

  posts: Array<Post>;
  selectedPost = null;

  constructor(
    public dialog: DialogRef<any>, 
    public authTokenService: Angular2TokenService, 
    private servPost: SprPostService
  ) { 
    this.sprPosts = new Array<Post>();
  }

  ngOnInit() {
    this.loadPosts();
  }

  private loadPosts() {
    this.servPost.getPosts().subscribe(posts => this.posts = posts);
  }

  SelectedPost(PostId) {
    this.selectedPost = this.posts.find(el => {
      return el.post_id === PostId
    })
  }

}

Answer 1

您的帖子列表将通过* ngFor遍历。每个tr将显示列表中的每个记录。所以tr不会是您的帖子列表。您必须在tr上应用selectedPost（）函数，因为在tr上，您将获得帖子列表的帖子实例。请参考以下代码：

<a>
    <table class="table table-hover">
       <thead>
          <tr>
            <th>Name</th>
              </tr>
            </thead>
            <tbody>
              <tr  *ngFor="let post of posts" (click)="SelectedPost(post?.post_id)">
                <td>{{post.name}} </td>
              </tr>
            </tbody>
          </table>
        </a>

现在您将获得选定的帖子。您已经做过的其他事情。

Answer 2

您可以将click事件绑定到Angular中的任何元素。您可以为事件分配一个功能，该事件应该分配一个帖子selectPost()。

<tr  *ngFor="let post of posts">
    <td (click)="selectPost(post)">{{post.name}}</td>
</tr>

该函数（在component.ts中）很简单，您可以使用post作为函数参数：

public selectPost(postToSelect: Post){
  this.selectedPost = postToSelect;
}

（您也可以直接设置selectedPost，例如：(click)="selectedPost = post"。但是最好将其放入函数中）

如何通过从列表中选择一个项目来解锁按钮？

2 个答案: