Angular2 - 將路由器參數作爲變量傳遞給ngForm

將路由器參數（id）傳遞給ngForm然後傳遞給事件發送器只有一點困難。這裏是我如何獲得id - 正如你所看到的第一個console.log工作正常，我可以從路由器獲取id。現在，我想這個分配給我的singleOpenHome對象（但得到一個未定義的錯誤）：Angular2 - 將路由器參數作爲變量傳遞給ngForm

@Input() singleOpenHome: OpenHomeModel; 

ngOnInit() { 
     // Get the slug on it from the router 
     this.route.params.forEach((params: Params) => { 
      let id = params['propertyID']; 
      console.log('id on the child is:'+id); 
      //this.singleOpenHome.propertyID == id; Cannot read property 'propertyID' of undefined 
     }); 
    }

現在我想這個傳遞給形式：

<form class="my2" #form="ngForm" (ngSubmit)="handleSubmit(form.value, form.valid)" novalidate></form>

這裏是我的事件emmitter：

@Output() 
    update: EventEmitter<OpenHomeModel> = new EventEmitter<OpenHomeModel>(); 

    constructor(private route: ActivatedRoute) {} 

    handleSubmit(sinlgeOpenHome: OpenHomeModel, isValid: boolean) { 
     if (isValid) { 
      this.update.emit(sinlgeOpenHome); 
     } 
    }

任何幫助表示讚賞

來源

2017-02-17 rhysclay

您顯示的所有代碼是否屬於同一個組件？如果是，只需將路由參數分配給類屬性 - this.id = params ['propertyID']; - 然後您可以從組件或其模板中的任何位置訪問該屬性。 – AngularChef

試過這個：this.singleOpenHome.propertyID = params ['propertyID'];但我不能顯示像{{singleOpenHome.propertyID}}模板不會工作的值。 – rhysclay

我不明白。你爲什麼不嘗試我建議的代碼？你顯示的所有代碼是否屬於同一個組件？ – AngularChef

我所遇到的問題具體涉及到轉換route.paramsObservable變成Promise這是forEach所做的。考慮簡單地使用subscribe

ngOnInit() { 
    // Get the slug on it from the router 
    this.route.params.subscribe(params => { 
    const id = params['propertyID']; 
    console.log(`id on the child is: ${id}`); 
    }); 
}

這看起來像行一個錯字

this.singleOpenHome.propertyID == id;

你進行比較，而不是分配。

這就是說你可能有其他的錯誤導致該屬性未定義。由於它被標記爲輸入，我假定它來自外部綁定。確保您傳遞給此綁定的值已正確初始化。

來源

2017-02-17 10:54:08

你是如此正確 - 我沒有正確地完成綁定，我有一個父容器，它應該初始化singleOpenHome對象並將它傳遞給它的子組件，那麼我可以分配propertyID變量（但我會通過綁定從父項傳入） – rhysclay

Angular2 - 將路由器參數作爲變量傳遞給ngForm

回答

相關問題