*ngIf在一个变量上的行为，当*ngIf在另一个变量上发生故障时
我很难让*ngFor在带有输入的DataList中工作。
这很管用..。
<input
type="text" class="form-control" list="tktnum"
placeholder="Ticket Number..." [(ngModel)]="dbParams.tktNum"
>
<datalist id="tktnum">
<option>{{tktVals[0].TicketNo}}</option>
<option>{{tktVals[1].TicketNo}}</option>
<option>{{tktVals[2].TicketNo}}</option>
</datalist>但这不是..。
<input
type="text" class="form-control" list="tktnum"
placeholder="Ticket Number..." [(ngModel)]="dbParams.tktNum"
>
<datalist id="tktnum">
<option *ngFor="let a of tktVals">{{ a.TicketNo }}</option>
</datalist>当我使用第二个代码块时，下拉框仍然是空的。
我试过什么
我尝试创建一个新的角应用程序，只使用这段代码，这已经成功了，但是当我尝试将它包含在实际的应用程序中时，*ngFor不起作用。我在实际应用程序中的HTML表中使用*ngFor，它工作得很好。问题似乎只出现在DataList上，在我正在开发的应用程序中也是如此。我正在使用VS代码，并更新到最新版本，重新编译的应用程序从一开始。我正在Windows 10机器上工作。
--这是类型记录代码--删除了不相关的条目，
export class TicketReportComponent implements OnInit {
tktVals: Array<{TicketNo: string}>;
ngOnInit(): void {
this.tktVals = [{"TicketNo": "1"}, {"TicketNo": "2"}];
}
}回答 3
Stack Overflow用户
发布于 2020-12-06 14:52:35
检查控制台上是否有任何错误，是否存在类似于this issue的接缝问题，可能需要在调用此组件的模块上导入BrowserModule或CommonModule。
Stack Overflow用户
发布于 2020-12-06 18:14:07
@Visar Hynei是正确的。
在您的module.ts中，您已经在Decal口粮数组中声明了这个组件。检查是否在imports数组中添加了commonModule。如果不导入，Module.ts
@NgModule({导入: BrowserModule、FormsModule、commonModule、声明: AppComponent、引导程序: AppComponent })
Stack Overflow用户
发布于 2020-12-07 16:07:59
问题在于初始化*ngIf在另一个html元素(表)中使用的类属性(reportElements)。当该reportElements未初始化时，无法确定它的长度，并且javascript在控制台中抛出“未定义”消息。当我在“reportElements”中初始化ngOnInit时，长度变为0(而不是未定义的)，*ngIf开始在表上正常工作。这还导致datalist中的*ngFor开始正常工作。如需参考，请参阅下面的更新代码..。
<div class="row">
<div class="col">
<input
type="text" class="form-control" list="tktnum"
placeholder="Ticket Number..." [(ngModel)]="tktNum"
>
<datalist id="tktnum">
<option *ngFor="let a of tktVals">{{a.TicketNo}}</option>
</datalist>
</div>
</div>
<br><br>
<div class="row">
<div class="col">
<table class="table table-hover table-striped table-dark table-bordered"
*ngIf="reportElements.length > 0">
<thead>
<tr>
<th scope="col">Ticket Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let _ of reportElements">
<td>{{ _.F1 }}</td>
</tr>
</tbody>
</table>
</div>
</div>类型标
import { Component, OnInit, VERSION } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
reportElements: [{F1: 3}];
tktVals: Array<{ TicketNo: string }> = [{ TicketNo: "1" }, { TicketNo: "2" }];
tktNum: any;
constructor() {}
ngOnInit(): void {
this.tktVals = [{ TicketNo: "1" }, { TicketNo: "2" }];
//Uncomment the following line of code and it will start working as expected.
//this.reportElements = [{F1: 3}];
console.log(this.reportElements.length);
}
}https://stackoverflow.com/questions/65169150
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号