معني - angularjs شرح




لا يمكن الارتباط بـ "ng-forOf" نظرًا لأنها ليست خاصية أصلية معروفة (7)

أحاول اتباع البرنامج التعليمي Angular 2 الأساسي هنا:

https://angular.io/docs/js/latest/guide/displaying-data.html

يمكنني الحصول على التطبيق الزاوي لتحميل وعرض اسمي مع هذا الرمز:

import { Component, View, bootstrap } from 'angular2/angular2';

@Component({
    selector: "my-app"
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";

    }

}
bootstrap(AppComponent);

ومع ذلك ، عندما أحاول إضافة مجموعة من السلاسل وحاول عرضها باستخدام ng-for ، فإن ذلك يلقي الخطأ التالي:

Can't bind to 'ng-forOf' since it isn't a known native property ("
    <p>Friends:</p>
    <ul>
        <li [ERROR ->]*ng-for="#name of names">
        {{ name }}
        </li>
"): [email protected]:16
Property binding ng-forOf not used by any directive on an embedded template ("
    <p>Friends:</p>
    <ul>
        [ERROR ->]<li *ng-for="#name of names">
        {{ name }}
        </li>
"): [email protected]:12

هنا هو الكود:

import { Component, View, bootstrap } from 'angular2/angular2';

@Component({
    selector: "my-app"
})

@View({
    template: `
        <p>My name: {{ myName }}</p>
        <p>Friends:</p>
        <ul>
            <li *ng-for="#name of names">
                {{ name }}
            </li>
        </ul>
    `,
    directives: [ NgFor ]
})

class AppComponent {
    myName: string;
    names: Array<string>;
    constructor() {
        this.myName = "Neil";
        this.names = ["Tom", "Dick", "Harry"];
    }

}
bootstrap(AppComponent);

ماذا ينقصني؟


إذا كنت تستخدم alpha 52 ، تحقق من CHANGELOG.md في GitHub repo. لقد قاموا بتغيير القالب إلى حساس لحالة الأحرف وهو ngFor بدلاً من ng-for (مشابه لجميع التوجيهات الأخرى)

لم يتم تغيير أسماء العناصر مثل <router-outlet> على الرغم من أن تظل متوافقة مع مواصفات العناصر المخصصة التي تتطلب شرطة في اسم العلامة للعناصر المخصصة.

في > = RC.5 (والأخير) ngFor والتوجيهات المماثلة ليست المحيطة بشكل افتراضي. أنها تحتاج إلى أن تقدم صراحة مثل

@NgModule({
  imports: [CommonModule],

أو إذا كنت لا تمانع في أن تكون الوحدة مقفلة لتكون المتصفح فقط

@NgModule({
  imports: [BrowserModule],

يقوم BrowserModule بتصدير CommonModule كما يفعل WorkerAppModule .

تحديث

يجب استيراد BrowserModule في وحدة التطبيق ، في الوحدات الأخرى يجب أن يتم استيراد CommonModule بدلاً من ذلك.


بناء جملة التوجيه ngFor هو

<tr *ngFor="let name of names">{{name}}</tr>

لاحظ أنه لم يعد # اسمًا للأسماء كما كان ، لكن اترك اسمًا للأسماء ويتطلب ngFor العلامة * وهو حساس لحالة الأحرف.


في Angular2 beta ng-for غير صحيح. يجب أن يكون *ngFor .


كما قد يكون سبب الخطأ المطبعي. أنا فقط واجهت هذه المشكلة كان لدي

<div class="row" *ngFor="let order or orders">

كما ترى هناك دع أوامر أو أوامر بدلاً من دع أوامر


نظرًا لأنه حقق نجاحًا كبيرًا في القضية الأخرى التي تم تكرارا أنها نسخة مكررة من هذه المشكلة ، فإليك استجابة لي حصلت على عدد كبير من الأصوات الزائدة:

فقط لأي شخص مفقود ، واجهت مشكلة حيث كتبت ngif بدلاً من ngIf (لاحظ الكابيتول "I").


وراء الإجابات الأخرى ، هناك سبب آخر محتمل وهو أنك تستخدم بعض أدوات إعادة تنسيق لغة تأشير النص الفائق html والتي تحول كل HTML الخاص بك - بما في ذلك قوالب المكونات - إلى أحرف صغيرة.

يعد استبدال القالب الزاوي حساسًا لحالة الأحرف ngFor و ngIf ، على الأقل اليوم ، لكن لا يمكنني أن أقول شيئًا أكيدًا للأسبوع القادم.

المكونات الإضافية الخاصة بـ webpack ، على سبيل المثال ، htmljs أو html-minify تعمل بشكل سيئ حيث تقوم بتحويل كل شيء إلى أحرف صغيرة على إعداداتها الافتراضية. تحقق من كود HTML في النص *ngif= ، فقد يكون مع كل الحروف الصغيرة (مثل *ngif= ...) ، وهو أمر لن يتم قبوله ، حتى لو كان ذلك في المصدر الأصلي صحيحًا!

بالطبع يكسر معيار HTML5.

يحدث ذلك نظرًا لأن تطوير angular2 الأكثر روعة يفكر في "رغبتهم في متابعة html5 عن كثب" ، ولكن هناك دائمًا بعض الاستثناءات المدهشة ، مما يجعل العمل مع angular2 دائمًا أفضل وأفضل.


مع الزاوي 2.1.0+

يبدو أن هذا هو نفسه باستثناء أنه يجب عليك استيراد BrowserModule في وحدة التطبيق الخاصة بك واستيراد CommonModule في الآخرين (لا يمكنك استيراد BrowserModule مرتين مع طرق التحميل البطيئة).

مع الزاوي 2 rc5:

قدم هذا الإصدار NgModules ، تحتاج إلى استيراد BrowserModule في الوحدة (الوحدات) من أجل استخدام ngFor ، و ngIf :

يقوم BrowserModule بتسجيل موفري خدمات التطبيقات الحرجين. ويشمل أيضًا التوجيهات الشائعة مثل NgIf و NgFor التي تصبح مرئية وقابلة للاستخدام على الفور في أي من قوالب مكونات هذه الوحدات.

مثال:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [BrowserModule],
  providers: [],
  exports: [],
  declarations: []
})
export class MyModule { }




angular