Assigning a value to a model's string in AngularFire


#1

Hi, I’m trying to assign a string to a model (Tag.ts) then use it as a [src] for my images, to be displayed on other pages.

Basically, I’m trying to change the value of a tag’s string (colorSrc) to “…/…/assets/colors/color.jpg”.
This will change the avatar’s picture when displayed on main tags page.

Runtime error when trying to select color in colorsPage is

Cannot read property ‘colorSrc’ of undefined

colors.ts (class of color page, where error happens when I try to click a color)

export class ColorsPage {

   tag: Tag={
    tagName:'',
    colorSrc: ''
   };

   colorSrcRed:string='../../assets/colors/red.jpg';
   colorSrcBlue:string='../../assets/colors/blue.jpg';
   colorSrcGreen:string='../../assets/colors/green.jpg';
   colorSrcPurple:string='../../assets/colors/purple.jpg';
   colorSrcYellow:string='../../assets/colors/yellow.jpg';


  constructor(public navCtrl: NavController, public navParams: NavParams, private addTags: AddTagService) {

  }

  ionViewDidLoad() {
    this.tag= this.navParams.get('tag');
  }

  colorRed(tag:Tag){

    this.colorSrcRed=tag.colorSrc;
    this.addTags.editTag(tag);
    }


  colorBlue(tag:Tag){

    this.colorSrcBlue=tag.colorSrc;
    this.addTags.editTag(tag);
    }

//also tried to assign it straight like this one, not working too

colorYellow(tag:Tag){

    this.tag.colorSrc="../../assets/colors/yellow.jpg";
    this.addTags.editTag(tag);
  }


colors.html


<ion-header>

  <ion-navbar>
  <ion-title>Choose a Color</ion-title>
</ion-navbar>

</ion-header>

<ion-content>

  <ion-list>
    <ion-item>
          <ion-avatar (click)="colorRed(tag)">
          <img src="../../assets/colors/red.jpg">
          </ion-avatar>
          Red
    </ion-item>

    <ion-item>

          <ion-avatar (click)="colorBlue(tag)">
          <img src="../../assets/colors/blue.jpg">
          </ion-avatar>
          Blue

    </ion-item>

    <ion-item>

          <ion-avatar (click)="colorGreen(tag)">
          <img src="../../assets/colors/green.jpg">
          Green
          </ion-avatar>
    </ion-item>

    <ion-item>

          <ion-avatar (click)="colorPurple(tag)">
          <img src="../../assets/colors/purple.jpg">
          </ion-avatar>
          Purple
    </ion-item>

    <ion-item>

          <ion-avatar (click)="colorYellow(tag)">
          <img src="../../assets/colors/yellow.jpg">
          </ion-avatar>
          Yellow
    </ion-item>
  </ion-list>

  <ion-input [(ngModel)]="tag.colorSrc" type="text"></ion-input>

<!-- I just put ion-input in the end there to check if it gets the correct value, but it always returns with nothing. --!>
</ion-content>

Tag.ts (model)

export interface Tag {

  key?: string;
  tagName: string;
  colorSrc: string;

}

AddTag Service.ts

@Injectable()
export class AddTagService{

  private tagListRef = this.db.list<Tag>('tagList');


  constructor(private db: AngularFireDatabase ){

  }
getTagList(){

    return this.tagListRef;
  }

addTag(tag:Tag) {
  return this.tagListRef.push(tag);
}

editTag(tag:Tag){
  return this.tagListRef.update(tag.key, tag);
}

removeTag(tag:Tag){
  return this.tagListRef.remove(tag.key);
}


//I tried using both addColor and editTag on colors.ts, the error is the same. 

addColor(tag:Tag){
  return this.tagListRef.update(tag.colorSrc, tag)
}

}

//these are all working well in other classes

tags.html (where I’m trying to display the change in avatar’s img source, but default error image is displayed)

 <ion-content padding>


       <ion-list>

            <ion-item-sliding *ngFor="let tag of tagList | async" >
              <button ion-item clear (click)="openEdit(tag)" >
              <ion-avatar item-start><img [src]="tag.colorSrc"></ion-avatar>
              {{tag.tagName}}
            </button>

            <ion-item-options side="right">
                <button ion-button color="danger" (click)="removeTag(tag)">Delete
                    <ion-icon name="trash"></ion-icon>
                </button>
              </ion-item-options>

            </ion-item-sliding>

      </ion-list>

      <ion-fab bottom right>
          <button ion-fab color="dark" (click)="openAddTags()"><ion-icon name="add"></ion-icon></button>
        </ion-fab>

  </ion-content>

tags.ts

export class TagsPage {
  @ViewChild(Nav) nav: Nav;

  tagListRef: AngularFireList<any>;
  tagList: Observable<Tag[]>;
  tag: Tag = {
    tagName: '',
    colorSrc: ''
   };

  constructor(public navCtrl: NavController, public navParams: NavParams, private serviceTags: AddTagService, private afDatabase: AngularFireDatabase, public alertCtrl: AlertController) {


  this.tagList = this.serviceTags
  .getTagList()
  .snapshotChanges()

  .map(
    changes => {
      return changes.map(c =>
      ({
        key: c.payload.key,  ...c.payload.val()
      }))
    }
  )
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TagsPage');
  }

  openAddTags(){
    this.navCtrl.push(AddTagsPage);
  }

  openEdit(tag){
    this.navCtrl.push(EditTagPage, {tag: tag});
  }

  removeTag(tag:Tag){
       let confirm = this.alertCtrl.create({
        title: 'Delete tag',
        message: "Are you sure you wanna delete this tag?",
        buttons: [
          {
            text: 'No',
            handler: () => {
              console.log('Prompt canceled')
            }
          },

          {
            text: 'Yes',
            handler: () => {
              this.serviceTags.removeTag(tag)
            }
          }

        ]
      });
      confirm.present();
      
    }
  }

addTags.ts (where I add new tags. tagName works well but colorSrc assigns no value.)

export class AddTagsPage {

   tag: Tag = {
    tagName: '',
    colorSrc:''
   };

  constructor(public navCtrl: NavController, public navParams: NavParams, public nav: Nav,
  public alertCtrl: AlertController, private addTags: AddTagService) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AddTagsPage');
  }

  addTag(tag:Tag){

   if (tag.tagName == '' || tag.tagName == ' '){

    let error = this.alertCtrl.create({
      title: 'Error',
      message: "Please populate the required fields!",
      buttons: [
        {
          text: 'OK',
          handler: data => {

          }
        }

      ]
    });
    error.present();
  }
    else {
      let confirm = this.alertCtrl.create({
        title: 'Success!',
        message: "Data Uploaded",
        buttons: [
          {
            text: 'OK',
            handler: data => {
              this.addTags.addTag(tag).then(ref => {
              this.navCtrl.push(TagsPage, { key: ref.key })
            });
          }
        }
        ]
      });
      confirm.present();
    }
  }

  changeColor(tag){
    this.navCtrl.push(ColorsPage, {key:tag});
  }

}

Can anyone please help me out? I’m new on Ionic. Thanks! :slight_smile: