Question

所以我想做的是显示一个指令，其中包含一条消息“您没有输入任何内容”，以防用户未在输入面板中键入单个符号。

在“其他”下，我试图在控制台中显示结果-效果很好。但是我完全不明白如何将其链接到#tooShort指令。

我的.html如下：

<input style="width:100%; border:1px solid black; border-radius: 5px; height: 15px;" [(ngModel)]="newTask">
<button (click)="add()">Add task</button>

<ng-template #tooShort>
<div class="center">
<p>You haven't write anything</p>
</div>
</ng-template>

还有我的.ts：

newTask: string;
tasksList: Array<string> = [];


add() {
    if(this.newTask!=""){
    this.tasksList.push(this.newTask);
    this.newTask = "";
  } else
    document.body.innerHTML = "tooShort";
  }

Answer 1

请勿直接修改html（不好的做法）。在这种情况下，您可以使用表单组：

<div *ngIf="form.newTask.value < 1">

Answer 2

我认为您完全错了。我认为您需要的是这个。

   <input style="width:100%; border:1px solid black; border-radius: 5px; 
    height: 
      15px;" [(ngModel)]="newTask">
    <button (click)="add()">Add task</button>

    <div class="center">
      <p #tooShort>You haven't write anything</p>
    </div>

在ts中：

@ViewChild('tooShort') tooShort: ElementRef;

add() {
  if (this.newTask !== '') {
   this.tasksList.push(this.newTask);
   this.newTask = '';
   this.tooShort.nativeElement.innerText = '';
} else {
   this.tooShort.nativeElement.innerText = 'tooshort';
 }
}

但是，您不应该像这样直接操纵dom。您最好创建一个指令并使用渲染器执行该指令，或者简单地显示基于值的文本。

如何从.ts文件显示.html中的指令

2 个答案: