Node.js 为什么没有正确预选投票选项？

您需要经过身份验证才能在投票中投票。投票时，有两个问题：

在离开或重新加载页面之前，您可以进行无限次的投票

当您重新加载页面时，最终会阻止您投票，但与预先选择您投票的选项不同，它始终是预先选择的第二个选项

---

应该发生什么：

注册/登录，然后投票表决。当您单击某个选项时，您所做的投票选择将被锁定，您无法在该投票中再投票

---

我当前代码的流程如何工作：

当用户单击某个选项时，计数器将增加，投票将保存在一个数组中，该数组将推送到数据库中的用户对象

加载组件时，当前登录用户的投票数据库数据通过本地

投票
变量中的
ngonit（）
方法保存，然后用于检查用户已经投票的投票以及他投了什么票。问题是，当实际情况并非如此时，所做的选择总是有选择的

我理解为什么在页面重新加载之前您可以多次投票，但我不知道如何在用户投票后立即在客户端和后端锁定投票（如果用户已经对投票进行了投票，则阻止注册更多投票）

至于为什么它已经是预选的第二选择，我不知道


代码：

HTML

<div class="formWidth">
    <form (ngSubmit)="onSubmit(f)" #f="ngForm">
        <div class="form-group">
            <label class="inputTitle" for="title">Poll Title</label>
            <input
                    type="text"
                    id="title"
                    class="form-control"
                    [ngModel]="poll?.title"
                    name="title"
                    required maxlenth="30">
            <label class="inputTitle" for="choice1">Choice1</label>
            <input
                    type="text"
                    id="choice1"
                    class="form-control"
                    [ngModel]="poll?.choice1"
                    name="choice1"
                    required maxlenth="20">
            <label class="inputTitle" for="choice2">Choice2</label>
            <input
                    type="text"
                    id="choice2"
                    class="form-control"
                    [ngModel]="poll?.choice2"
                    name="choice2"
                    required maxlenth="20">
        </div>
        <button type="button" class="btn btn-danger" (click)="onClear(f)">Clear</button>
        <button class="btn btn-primary" type="submit">Save</button>
    </form>
</div>

路由（后端）

好的，首先您的单选按钮不会被禁用，因为保存投票后您不会更新
poll.component.ts
中的投票数组

我不确定这是否是一个好的解决方案：

在您的
poll.service.ts
中：

voteOn(pollID: string, userID: string, choice: number) {
    var user;
    return new Promise((resolve) => { //Create a new promise to wrap the Subscriptions
    this.http.get('http://localhost:3000/user/' + userID)
        .map(response => response.json())
        .subscribe(
        json => {
            user = JSON.parse(json);
            if (user.votes == undefined) {

            ...

                .catch((error: Response) => {
                    this.errorService.handleError(error.json());
                    return Observable.throw(error);
                }).subscribe(() => {
                    resolve(user.votes); // <- Resolve your promise
                })
        }
        )
        });
}

voteOn(...).then((votes) => {
    this.votes = votes; // To update your votes array
    this.updateVote();
})

vote:any //Added to your poll component


updateVote() {
    this.vote = this.votes.find((vote) => {
        return vote.pollID === this.poll.pollID;
    });
}

我不建议在绑定中调用函数，因为调用函数通常是为了“检测更改”，就像在组件中一样。
因此，我将按以下方式更改代码：

在您的
poll.component.ts
中：

voteOn(pollID: string, userID: string, choice: number) {
    var user;
    return new Promise((resolve) => { //Create a new promise to wrap the Subscriptions
    this.http.get('http://localhost:3000/user/' + userID)
        .map(response => response.json())
        .subscribe(
        json => {
            user = JSON.parse(json);
            if (user.votes == undefined) {

            ...

                .catch((error: Response) => {
                    this.errorService.handleError(error.json());
                    return Observable.throw(error);
                }).subscribe(() => {
                    resolve(user.votes); // <- Resolve your promise
                })
        }
        )
        });
}

voteOn(...).then((votes) => {
    this.votes = votes; // To update your votes array
    this.updateVote();
})

vote:any //Added to your poll component


updateVote() {
    this.vote = this.votes.find((vote) => {
        return vote.pollID === this.poll.pollID;
    });
}

您需要在
ngOnInit
方法中调用此方法：

    this.pollService.voted(localStorage.getItem('userId')).subscribe(
        data => {
            var result = JSON.parse(data);
            this.votes = result.votes;
            this.updateVote(); // <- To select the vote of this poll
        },
        err => { console.log("NGONINIT ERROR: " + err) },
        () => { }
    );

但是，如果您不想以这种方式更改代码，请告诉我，这样我可以提供另一种解决方案。
如承诺的那样，如果so允许，我将奖励您50次代表奖金（在48小时内）。谢谢你的回答！请不要回滚对帖子的有效更正。问题不应包含任何元积垢。如果你想讨论这项政策，请直接前往。
    <fieldset [disabled]="vote">
      {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" name="my_radio" value="{{ poll.choice1 }}" (click)="onChoice1(form)" [checked]="vote?.choice == 1">  {{ poll.choice1 }}
      <br>
      {{ poll.counter2 }} votes <input type="radio" id="{{ poll.choice2  }}" name="my_radio" value="{{ poll.choice2 }}" (click)="onChoice2(form)" [checked]="vote?.choice == 2">  {{ poll.choice2 }}
    </fieldset>