ngIf 在输入值上

Posted 2023-02-22

【中文标题】ngIf 在输入值上

【英文标题】：ngIf on input value

【发布时间】：2020-07-24 11:12:55

【问题描述】：

我有获取用户输入的字段，根据它下面的元素将显示已写入的内容

 <label>message</label>
 <input type="text" name="name" [(ngModel)]="person.message"class="form-control">

 <label class="label">you've written this </label>
 <input type="text" name="name" disabled value="message" class="form-control">

此代码工作正常，但我想为显示的值分配一个条件，如下所示： *ngIf=person.message!=null?message":'write'

这意味着如果输入字段不为空，则显示写入的内容，否则显示单词 write

【问题讨论】：

“写”这个词的目的是什么？你不应该改用placeholder（例如placeholder="write"）吗？

@ConnorsFan 这是 vue 的一点，但我想学习如何对输入值设置条件，它可能会在另一种情况下为我服务:)

【参考方案1】：

您可以在... 中使用ternary operator

 <input type="text" name="name" disabled value="person.message!=null ? message : 'write'" class="form-control">

或者使用ternary operator将值设置为属性。

<input type="text" name="name" disabled [value]="person.message!=null ? message : 'write'" class="form-control">

【参考方案2】：

只需检查值是否存在，否则使用 OR 运算符分配默认值。

<label>message</label>
     <input type="text" name="name" [(ngModel)]="person.message" class="form-control">

     <label class="label">you've written this </label>
     <input type="text" name="name" disabled [value]="person.message ? message : 'write'" class="form-control">

【讨论】：

这段代码只是验证person.message是否存在它不显示消息

你能告诉你如何以及在哪里设置来自 person.message 的消息吗？它们总是同步的吗？

我在 ts 中收到来自[(ngModel)] 的消息，然后我在 html 中显示它！

我已经用基本逻辑更新了我的答案，因为我不确定 message 和 person.message 是如何链接的，所以删除了旧逻辑。