#1527 Fixed interpolation function in TranslateDefaultParser

Author: CodeAndWeb

projects/ngx-translate/src/lib/translate.parser.spec.ts

@@ -34,10 +34,18 @@ describe('Parser', () => {
       expect(parser.interpolate( uc , {"x":'bless'})).toBe('BLESS YOU!');
     });
 
+    it('should handle edge cases: value not found', () => {
+      expect(parser.interpolate("This is an array {{ key1.key2 }}", {key1: {key3: ['A', 'B', 'C']}})).toEqual("This is an array {{ key1.key2 }}");
+    });
+
     it('should handle edge cases: array', () => {
       expect(parser.interpolate("This is an array {{ key1.key2 }}", {key1: {key2: ['A', 'B', 'C']}})).toEqual("This is an array A, B, C");
     });
 
+    it('should handle edge cases: null', () => {
+      expect(parser.interpolate("This is {{ key1.key2 }}", {key1: {key2: null}})).toEqual("This is null");
+    });
+
     it('should handle edge cases: bool', () => {
       expect(parser.interpolate("This is a bool: {{ key1.key2 }}", {key1: {key2: true}})).toEqual("This is a bool: true");
     });

projects/ngx-translate/src/lib/translate.parser.ts

@@ -48,29 +48,29 @@ export class TranslateDefaultParser extends TranslateParser
       return expr;
     }
 
-    return expr.replace(this.templateMatcher, (_substring: string, key: string) =>
+    return expr.replace(this.templateMatcher, (substring: string, key: string) =>
     {
-      return this.getInterpolationReplacement(params, key);
+      const replacement = this.getInterpolationReplacement(params, key);
+      return replacement !== undefined ? replacement : substring;
     });
   }
 
   /**
    * Returns the replacement for an interpolation parameter
    * @params:
    */
-  protected getInterpolationReplacement(params: InterpolationParameters, key: string): string
+  protected getInterpolationReplacement(params: InterpolationParameters, key: string): string|undefined
   {
-    return this.formatValue(getValue(params, key), key);
+    return this.formatValue(getValue(params, key));
   }
 
   /**
    * Converts a value into a useful string representation.
    * @param value The value to format.
-   * @param fallback the value to return in case value is undefined
    * @returns A string representation of the value.
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  protected formatValue(value: any, fallback:string): string
+  protected formatValue(value: any): string|undefined
   {
     if (isString(value)) {
       return value;
@@ -93,6 +93,6 @@ export class TranslateDefaultParser extends TranslateParser
       return JSON.stringify(value); // Pretty-print JSON if no meaningful toString()
     }
 
-    return fallback;
+    return undefined;
   }
 }

projects/ngx-translate/src/lib/util.ts

@@ -141,7 +141,11 @@ export function getValue(target: any, key: string): any
   do
   {
     key += keys.shift();
-    if (isDefined(target) && isDefined(target[key]) && (isDict(target[key]) ||isArray(target[key]) || !keys.length))
+    if (
+      isDefined(target) &&
+      (isDefined(target[key]) || target[key] === null) &&
+      (isDict(target[key]) || isArray(target[key]) || !keys.length)
+    )
     {
       target = target[key];
       key = "";