template - Angular2*ngIf تحقق من طول صفيف الكائن في القالب




ng submit angular 4 (4)

تمت الإشارة إلى https://angular.io/docs/ts/latest/guide/displaying-data.html والمكدس كيفية التحقق من الكائن الفارغ في القالب الزاوي 2 باستخدام * ngIf لا يزال الحصول على سياق خطأ في بناء الجملة غير معروف. إذا قمت بإزالة شرط * ngIf ، فإنني أتلقى قيمًا في أعضاء الفريق إذا قمت بدفع بعض القيمة فيه حتى أتمكن من الوصول إلى القيم في أعضاء الفريق.

كائن teamMember بي هو [ ] array أحاول التحقق من صفيف الحالة فارغ من حيث الحجم.

يحاول :

<div class="row" *ngIf="(teamMembers | json) != '{}'">

و

<div class="row" *ngIf="teamMembers.length > 0"> //Check length great than
                                                 throwing syntax error
            <div class="col-md-12">
                <h4>Team Members</h4>
                <ul class="avatar" *ngFor="let member of teamMembers">
                    <li><a href=""><gravatar-image [size]="80" [email]="member.email"></gravatar-image></a></li>
                </ul>
            </div>
        </div>

مكون :

@Component({
selector: 'pbi-editor',
})
export class AppComponent implements OnInit {
teamMembers: User[];

أي مساعدة ستكون كبيرة.


ربما تكون مبالغة طفيفة ولكنها أنشأت مكتبة ngx-if-empty-or-has-items وهي تتحقق مما إذا كان كائن أو مجموعة أو خريطة أو صفيفًا غير فارغ. ربما سوف يساعد شخص ما. له نفس وظيفة ngIf (بعد ذلك ، يتم دعم بناء جملة "و" و "كما").

arrayOrObjWithData = ['1'] || {id: 1}

<h1 *ngxIfNotEmpty="arrayOrObjWithData">
  You will see it
</h1>

 or 
 // store the result of async pipe in variable
 <h1 *ngxIfNotEmpty="arrayOrObjWithData$ | async as obj">
  {{obj.id}}
</h1>

 or

noData = [] || {}
<h1 *ngxIfHasItems="noData">
   You will NOT see it
</h1>

ساعدني هذا المقال كثيرًا في معرفة سبب عدم نجاحه بالنسبة لي أيضًا. إنه يعطيني درسًا للتفكير في تحميل صفحة الويب وكيف يتفاعل الزاوي 2 كخط زمني وليس فقط النقطة الزمنية التي أفكر فيها. لم أر أي شخص آخر يذكر هذه النقطة ، لذلك سوف ...

سبب الحاجة * ngIf لأنه سيحاول التحقق من طول هذا المتغير قبل حدوث بقية عناصر OnInit ، ورمي الخطأ "الطول غير معروف". ولهذا السبب قمت بإضافة؟ لأنه لن يكون موجودًا بعد ، لكنه قريبًا.


يمكنك استخدام *ngIf="teamMembers != 0" للتحقق من وجود البيانات


<div class="row" *ngIf="teamMembers?.length > 0">

يتحقق هذا أولاً إذا كان teamMembers له قيمة وإذا كان teamMembers ليس لديهم قيمة ، فهو لا يحاول الوصول إلى length undefined لأن الجزء الأول من الشرط قد فشل بالفعل.







angular2-template