Question

我有两套代码，其中一项没有其他工作。我需要知道为什么吗？

不起作用：

<p *ngFor="let recp of recipes">
<div class="row">
    <div class="col-xs-12">
        <a href="#" class="list-group-item clearfix">
            <div class="pull-left">
                <h4 class="list-group-item-heading">{{recp.name}}</h4>
                <p class="list-group-item-text">{{recp.description}}</p>
            </div>
            <span class="pull-right">
                <img src="{{recp.imagePath}}" alt="" class="img-responsive" style="max-height:50px;">
            </span>
        </a>
        <app-recipe-item></app-recipe-item>
    </div>
</div>

错误：无法读取未定义的属性“名称”。

工作：

<div class="row">
    <div class="col-xs-12">
        <a href="#" class="list-group-item clearfix" 
        *ngFor="let recp of recipes">
            <div class="pull-left">
                <h4 class="list-group-item-heading">{{recp.name}}</h4>
                <p class="list-group-item-text">{{recp.description}}</p>
            </div>
            <span class="pull-right">
                <img src="{{recp.imagePath}}" alt="" class="img-responsive" style="max-height:50px;">
            </span>
        </a>
        <app-recipe-item></app-recipe-item>
    </div>
</div>

但是，如果您认为问题与<p>标签有关，则可以使用此方法

<p *ngFor ="let arr of addIncrement;>{{arr}}</p>

Answer 1

在插值之前，请检查null（或）undefined。在这种情况下，您可以使用?

<h4 class="list-group-item-heading">{{recp?.name}}</h4>
   <p class="list-group-item-text">{{recp?.description}}</p>

希望这会有所帮助！。

Answer 2

根据MDN，

内仅允许使用措辞内容   元件。 Angular可能会执行比您的浏览器更多的规则

P元素只允许包含内联元素

检查此以获取更多信息：

万维网联盟（W3C）https://www.w3.org/TR/html401/struct/text.html#h-9.3.1

P元素代表一个段落。它不能包含块级元素（包括P本身）。

<!ELEMENT P - O (%inline;)*            -- paragraph -->

角6 * ngFor

2 个答案: